Skip to content

Commit 2196b74

Browse files
kborcherskborchers
committed
Popup: Added show/hide animations and a demo
1 parent 6d430e4 commit 2196b74

File tree

3 files changed

+112
-8
lines changed

3 files changed

+112
-8
lines changed

‎demos/popup/animation.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>jQuery UI Popup - Animation demo</title>
5+
<link rel="stylesheet" href="../demos.css" />
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.button.js"></script>
12+
<script src="../../ui/jquery.ui.menu.js"></script>
13+
<script src="../../ui/jquery.effects.core.js"></script>
14+
<script src="../../ui/jquery.effects.blind.js"></script>
15+
<script src="../../ui/jquery.effects.scale.js"></script>
16+
<script src="../../ui/jquery.ui.popup.js"></script>
17+
<script>
18+
$(function() {
19+
var selected = {
20+
select: function( event, ui ) {
21+
$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
22+
$(this).popup("close");
23+
}
24+
};
25+
26+
$("#login-form").popup({
27+
show: {
28+
effect: "blind",
29+
direction: "up",
30+
mode: "show",
31+
duration: "fast"
32+
},
33+
hide: {
34+
effect: "scale",
35+
percent: 0,
36+
duration: "fast"
37+
}
38+
})
39+
.find(":submit").button().click(function(event) {
40+
event.preventDefault();
41+
});
42+
});
43+
</script>
44+
<style type="text/css">
45+
.ui-popup { position: absolute; z-index: 5000; }
46+
.ui-menu { width: 200px; }
47+
48+
/*
49+
table {
50+
border-collapse: collapse;
51+
}
52+
th, td {
53+
padding: 0.5em;
54+
border: 1px solid black;
55+
}
56+
*/
57+
58+
#login-form {
59+
width: 16em; border: 1px solid gray; border-radius: 5px;
60+
padding: 1em;
61+
box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
62+
background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
63+
font-size: 1.3em; outline: none;
64+
}
65+
#login-form label { display: inline-block; width: 5em; }
66+
#login-form .submit { margin-left: 5em; }
67+
</style>
68+
</head>
69+
<body>
70+
71+
<div class="demo">
72+
<a href="#login-form">Log In</a>
73+
<div class="ui-widget-content" id="login-form" aria-label="Login options">
74+
<div>
75+
<label for="un">Username</label>
76+
<input type="text" id="un" />
77+
</div>
78+
<div>
79+
<label for="pw">Password</label>
80+
<input type="password" id="pw" />
81+
</div>
82+
<div>
83+
<input type="submit" value="Login" class="submit" />
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div class="demo-description">
89+
90+
<p>A link to a login form that opens as a popup. Open and close animations have been used.</p>
91+
92+
</div><!-- End demo-description -->
93+
94+
95+
</body>
96+
</html>

‎demos/popup/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<h4>Examples</h4>
1111
<ul>
1212
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
<li><a href="animation.html">Popup - show/hide effects</a></li>
1314
<li><a href="popup-menu.html">Menu's as popup</a></li>
1415
<li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
1516
</ul>

‎ui/jquery.ui.popup.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ $.widget( "ui.popup", {
2222
position: {
2323
my: "left top",
2424
at: "left bottom"
25-
}
25+
},
26+
show: "slideDown",
27+
hide: "fadeOut"
2628
},
2729
_create: function() {
2830
if ( !this.options.trigger ) {
@@ -45,8 +47,9 @@ $.widget( "ui.popup", {
4547
.attr( "aria-owns", this.element.attr( "id" ) );
4648

4749
this.element
48-
.addClass( "ui-popup" );
49-
this.close();
50+
.addClass( "ui-popup" )
51+
this._beforeClose();
52+
this.element.hide();
5053

5154
this._bind(this.options.trigger, {
5255
keydown: function( event ) {
@@ -159,8 +162,8 @@ $.widget( "ui.popup", {
159162
of: this.options.trigger
160163
}, this.options.position );
161164

165+
this._show( this.element, this.options.show );
162166
this.element
163-
.show()
164167
.attr( "aria-hidden", "false" )
165168
.attr( "aria-expanded", "true" )
166169
.position( position );
@@ -190,17 +193,21 @@ $.widget( "ui.popup", {
190193
},
191194

192195
close: function( event ) {
193-
this.element
194-
.hide()
195-
.attr( "aria-hidden", "true" )
196-
.attr( "aria-expanded", "false" );
196+
this._beforeClose();
197+
this._hide( this.element, this.options.hide );
197198

198199
this.options.trigger.attr( "tabindex" , 0 );
199200
if ( this.removeTabIndex ) {
200201
this.element.removeAttr( "tabindex" );
201202
}
202203
this.isOpen = false;
203204
this._trigger( "close", event );
205+
},
206+
207+
_beforeClose: function() {
208+
this.element
209+
.attr( "aria-hidden", "true" )
210+
.attr( "aria-expanded", "false" );
204211
}
205212
});
206213

0 commit comments

Comments
 (0)