From: kborchers Date: Wed, 21 Sep 2011 15:42:07 +0000 (-0500) Subject: Popup: Added show/hide animations and a demo X-Git-Tag: 1.9m7~221 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=2196b74a3126dc2dedd4e91727dbc75c41dc45f5;p=jquery-ui.git Popup: Added show/hide animations and a demo --- diff --git a/demos/popup/animation.html b/demos/popup/animation.html new file mode 100644 index 000000000..3d5f50583 --- /dev/null +++ b/demos/popup/animation.html @@ -0,0 +1,96 @@ + + + + jQuery UI Popup - Animation demo + + + + + + + + + + + + + + + + + +
+ Log In +
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+ +

A link to a login form that opens as a popup. Open and close animations have been used.

+ +
+ + + + diff --git a/demos/popup/index.html b/demos/popup/index.html index e69365c98..961585268 100644 --- a/demos/popup/index.html +++ b/demos/popup/index.html @@ -10,6 +10,7 @@

Examples

diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 15349bc23..487a53eea 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -22,7 +22,9 @@ $.widget( "ui.popup", { position: { my: "left top", at: "left bottom" - } + }, + show: "slideDown", + hide: "fadeOut" }, _create: function() { if ( !this.options.trigger ) { @@ -45,8 +47,9 @@ $.widget( "ui.popup", { .attr( "aria-owns", this.element.attr( "id" ) ); this.element - .addClass( "ui-popup" ); - this.close(); + .addClass( "ui-popup" ) + this._beforeClose(); + this.element.hide(); this._bind(this.options.trigger, { keydown: function( event ) { @@ -159,8 +162,8 @@ $.widget( "ui.popup", { of: this.options.trigger }, this.options.position ); + this._show( this.element, this.options.show ); this.element - .show() .attr( "aria-hidden", "false" ) .attr( "aria-expanded", "true" ) .position( position ); @@ -190,10 +193,8 @@ $.widget( "ui.popup", { }, close: function( event ) { - this.element - .hide() - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ); + this._beforeClose(); + this._hide( this.element, this.options.hide ); this.options.trigger.attr( "tabindex" , 0 ); if ( this.removeTabIndex ) { @@ -201,6 +202,12 @@ $.widget( "ui.popup", { } this.isOpen = false; this._trigger( "close", event ); + }, + + _beforeClose: function() { + this.element + .attr( "aria-hidden", "true" ) + .attr( "aria-expanded", "false" ); } });