aboutsummaryrefslogtreecommitdiffstats
path: root/demos/popup
diff options
context:
space:
mode:
authorkborchers <k_borchers@yahoo.com>2011-09-21 10:42:07 -0500
committerkborchers <k_borchers@yahoo.com>2011-09-21 10:42:07 -0500
commit2196b74a3126dc2dedd4e91727dbc75c41dc45f5 (patch)
tree4ea912fa5e0cbd09f4a8e9346de961ec74a7142a /demos/popup
parent6d430e4fd30a7e7c711d4f276db740d400eca04c (diff)
downloadjquery-ui-2196b74a3126dc2dedd4e91727dbc75c41dc45f5.tar.gz
jquery-ui-2196b74a3126dc2dedd4e91727dbc75c41dc45f5.zip
Popup: Added show/hide animations and a demo
Diffstat (limited to 'demos/popup')
-rw-r--r--demos/popup/animation.html96
-rw-r--r--demos/popup/index.html1
2 files changed, 97 insertions, 0 deletions
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 @@
+<!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 e69365c98..961585268 100644
--- 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>