r2432 - Added demo for animated dialog.
Author: scott.gonzalez
Date: Wed Apr 1 19:37:25 2009
New Revision: 2432
Added:
trunk/demos/dialog/animated.html
Modified:
trunk/demos/dialog/index.html
Log:
Added demo for animated dialog.
Added: trunk/demos/dialog/animated.html
==============================================================================
--- (empty file)
+++ trunk/demos/dialog/animated.html Wed Apr 1 19:37:25 2009
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Animation</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+ <script type="text/javascript" src="../../ui/effects.core.js"></script>
+ <script type="text/javascript" src="../../ui/effects.blind.js"></script>
+ <script type="text/javascript" src="../../ui/effects.explode.js"></script>
+ <script type="text/javascript"
src="../../external/bgiframe/jquery.bgiframe.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $.ui.dialog.defaults.bgiframe = true;
+ // increase the default animation speed to exaggerate the effect
+ $.fx.speeds._default = 1000;
+ $(function() {
+ $('#dialog').dialog({
+ autoOpen: false,
+ show: 'blind',
+ hide: 'explode'
+ });
+
+ $('#opener').click(function() {
+ $('#dialog').dialog('open');
+ return false;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="dialog" title="Basic dialog">
+ This is an animated dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
+</div>
+
+<button id="opener">Open Dialog</button>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Dialogs may be animated by specifying an effect for the show and/or
hide properties. You must include the individual effects file for any
effects you would like to use.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: trunk/demos/dialog/index.html
==============================================================================
--- trunk/demos/dialog/index.html (original)
+++ trunk/demos/dialog/index.html Wed Apr 1 19:37:25 2009
@@ -10,6 +10,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ <li><a href="animated.html">Animated dialog</a></li>
<li><a href="modal.html">Modal dialog</a></li>
<li><a href="modal-message.html">Modal message</a></li>
<li><a href="modal-confirmation.html">Modal confirmation</a></li>