]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6d430e4)
Popup: Added show/hide animations and a demo 466/head
authorkborchers <k_borchers@yahoo.com>
Wed, 21 Sep 2011 15:42:07 +0000 (10:42 -0500)
committerkborchers <k_borchers@yahoo.com>
Wed, 21 Sep 2011 15:42:07 +0000 (10:42 -0500)
demos/popup/animation.html [new file with mode: 0644] patch | blob
demos/popup/index.html patch | blob | history
ui/jquery.ui.popup.js patch | blob | history

diff --git a/demos/popup/animation.html b/demos/popup/animation.html
new file mode 100644 (file)
index 0000000..3d5f505
--- /dev/null
+++ b/demos/popup/animation.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+       <title>jQuery UI Popup - Animation demo</title>
+       <link rel="stylesheet" href="../demos.css" />
+       <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+       <script src="../../jquery-1.6.2.js"></script>
+       <script src="../../ui/jquery.ui.core.js"></script>
+       <script src="../../ui/jquery.ui.widget.js"></script>
+       <script src="../../ui/jquery.ui.position.js"></script>
+       <script src="../../ui/jquery.ui.button.js"></script>
+       <script src="../../ui/jquery.ui.menu.js"></script>
+       <script src="../../ui/jquery.effects.core.js"></script>
+       <script src="../../ui/jquery.effects.blind.js"></script>
+       <script src="../../ui/jquery.effects.scale.js"></script>
+       <script src="../../ui/jquery.ui.popup.js"></script>
+       <script>
+       $(function() {
+               var selected = {
+                       select: function( event, ui ) {
+                               $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+                               $(this).popup("close");
+                       }
+               };
+
+               $("#login-form").popup({
+                       show: {
+                               effect: "blind",
+                               direction: "up",
+                               mode: "show",
+                               duration: "fast"
+                       },
+                       hide: {
+                               effect: "scale",
+                               percent: 0,
+                               duration: "fast"
+                       }
+               })
+               .find(":submit").button().click(function(event) {
+                       event.preventDefault();
+               });
+       });
+       </script>
+       <style type="text/css">
+               .ui-popup { position: absolute; z-index: 5000; }
+               .ui-menu { width: 200px; }
+
+               /*
+               table {
+                       border-collapse: collapse;
+               }
+               th, td {
+                       padding: 0.5em;
+                       border: 1px solid black;
+               }
+               */
+
+               #login-form {
+                       width: 16em; border: 1px solid gray; border-radius: 5px;
+                       padding: 1em;
+                       box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+                       background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+                       font-size: 1.3em; outline: none;
+               }
+               #login-form label { display: inline-block; width: 5em; }
+               #login-form .submit { margin-left: 5em; }
+       </style>
+</head>
+<body>
+
+<div class="demo">
+       <a href="#login-form">Log In</a>
+       <div class="ui-widget-content" id="login-form" aria-label="Login options">
+               <div>
+                       <label for="un">Username</label>
+                       <input type="text" id="un" />
+               </div>
+               <div>
+                       <label for="pw">Password</label>
+                       <input type="password" id="pw" />
+               </div>
+               <div>
+                       <input type="submit" value="Login" class="submit" />
+               </div>
+       </div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. Open and close animations have been used.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/popup/index.html b/demos/popup/index.html
index e69365c9865b2a4193c02b1fac4a549b28c7cbad..96158526800bb1d60929355281d48352b1b0c748 100644 (file)
--- a/demos/popup/index.html
+++ b/demos/popup/index.html
@@ -10,6 +10,7 @@
                <h4>Examples</h4>
                <ul>
                        <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+                       <li><a href="animation.html">Popup - show/hide effects</a></li>
                        <li><a href="popup-menu.html">Menu's as popup</a></li>
                        <li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
                </ul>
diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js
index 15349bc233147b73070aabe78f48377ac0c97490..487a53eead65aaba90e01072cdb002cc6bb928ea 100644 (file)
--- 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" );
        }
 });
 
The official jQuery user interface library: https://github.com/jquery/jquery-ui