r1275 - trunk/demos/dialog

Author: fg.todd
Date: Mon Dec 29 09:26:17 2008
New Revision: 1275
Added:
trunk/demos/dialog/modal_confirmation.html
trunk/demos/dialog/modal_form.html
trunk/demos/dialog/modal_message.html
Removed:
trunk/demos/dialog/buttons.html
Modified:
trunk/demos/dialog/default.html
trunk/demos/dialog/index.html
trunk/demos/dialog/modal.html
Log:
Re-vamped set of dialog examples that shows the standard set of dialog
types. Removed button.html because it was expanded into the 3 modal types.
Modified: trunk/demos/dialog/default.html
==============================================================================
--- trunk/demos/dialog/default.html    (original)
+++ trunk/demos/dialog/default.html    Mon Dec 29 09:26:17 2008
@@ -17,8 +17,9 @@
</head>
<body>
-<div id="dialog" title="Curabitur augue">
-

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna.
Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet
rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+<div id="dialog" title="Basic dialog">
+

This is the default dialog which is useful for displaying information.
It is created by simply calling .dialog on the ID of the content like this:
<pre>$("#dialog").dialog();</pre>

If the content exceeds the size of the window, a scrollbar will
automatically appear. The dialog window can be moved, resized and closed
with the 'x' icon by default.

</div>
</body>
Modified: trunk/demos/dialog/index.html
==============================================================================
--- trunk/demos/dialog/index.html    (original)
+++ trunk/demos/dialog/index.html    Mon Dec 29 09:26:17 2008
@@ -8,9 +8,11 @@
<dl class="nav">
    <dt>Dialog</dt>
-        <dd><a href="default.html">Default</a></dd>
-        <dd><a href="buttons.html">Buttons</a></dd>
-        <dd><a href="modal.html">Modal</a></dd>
+        <dd><a href="default.html">Basic dialog (default)</a></dd>
+        <dd><a href="modal.html">Modal dialog</a></dd>
+        <dd><a href="modal_message.html">Modal message</a></dd>
+        <dd><a href="modal_confirmation.html">Modal confirmation</a></dd>
+        <dd><a href="modal_form.html">Modal form</a></dd>
</dl>
</body>
Modified: trunk/demos/dialog/modal.html
==============================================================================
--- trunk/demos/dialog/modal.html    (original)
+++ trunk/demos/dialog/modal.html    Mon Dec 29 09:26:17 2008
@@ -23,11 +23,12 @@
</head>
<body>
-<div id="dialog" title="Curabitur augue">
-

+<div id="dialog" title="Basic modal dialog">
+

This is identical to the default dialog except a semi-transparent
overlay layer is added as an option to make this look modal to the page
content.

The dialog window can be moved, resized and closed with
the 'x' icon.

</div>
-<div>
+
+<div style="padding:20px;">

Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus
ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies
neque, sit amet auctor elit eros a lectus.

@@ -37,9 +38,10 @@
    <input type="radio" />radio<br />
    <select>
        <option>select</option>
-    </select><br />
+    </select><br /><br />
    <textarea>textarea</textarea><br />
</form>
</div>
+
</body>
</html>
Added: trunk/demos/dialog/modal_confirmation.html
==============================================================================
--- (empty file)
+++ trunk/demos/dialog/modal_confirmation.html    Mon Dec 29 09:26:17 2008
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Dialog - Buttons Demo</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.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">
+    $(function() {
+        $("#dialog").dialog({
+            modal: true,
+            overlay: {
+                backgroundColor: '#000',
+                opacity: 0.5
+            },
+            buttons: {
+                'Delete this file': function() {
+                    alert('The user was deleted forever!');
+                },
+                Cancel: function() {
+                    alert('You clicked Cancel. The dialog will now close.');
+                    $(this).dialog('close');
+                }
+            }
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div id="dialog" title="Modal confirmation dialog">
+

This type of dialog adds a button bar and is useful for confirming an
action that may be destructive or important. These are typically displayed
as modal dialogs to get the user's attention and force a decision before
continuing.

</div>
+
+
+
+<div style="padding:20px;">
+

+<form>
+    <input value="text input" /><br />
+    <input type="checkbox" />checkbox<br />
+    <input type="radio" />radio<br />
+    <select>
+        <option>select</option>
+    </select><br /><br />
+    <textarea>textarea</textarea><br />
+</form>
+</div>
+
+</body>
+</html>
Added: trunk/demos/dialog/modal_form.html
==============================================================================
--- (empty file)
+++ trunk/demos/dialog/modal_form.html    Mon Dec 29 09:26:17 2008
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Dialog - Buttons Demo</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.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">
+    $(function() {
+        $("#dialog").dialog({
+            height: '300',
+            modal: true,
+            overlay: {
+                backgroundColor: '#000',
+                opacity: 0.5
+            },
+            buttons: {
+                'Create user account': function() {
+                    alert('The user was created!');
+                },
+                Cancel: function() {
+                    alert('You clicked Cancel. The dialog will now close.');
+                    $(this).dialog('close');
+                }
+            }
+        });
+    });
+    </script>
+
+    
+    <style type="text/css" media="screen">
+        label, input { display:block; }
+        input.text { margin-bottom:12px; width:95%; }
+        fieldset { padding:0; border:0; margin-top:25px; }
+    </style>
+
+</head>
+<body>
+
+<div id="dialog" title="Modal confirmation dialog">
+

Example of a form placed inside a dialog.

+
+    <form>
+    <fieldset>
+        <label for="name">Name</label>
+        <input type="text" name="name" id="name" class="text" />
+        <label for="email">Email</label>
+        <input type="text" name="email" id="birthday" value="" class="text" />
+        <label for="password">Password</label>
+        <input type="password" name="password" id="birthday" value=""
class="text" />
+    </fieldset>
+    </form>
+</div>
+
+
+
+
+<div style="padding:20px;">
+

+<form>
+    <input value="text input" /><br />
+    <input type="checkbox" />checkbox<br />
+    <input type="radio" />radio<br />
+    <select>
+        <option>select</option>
+    </select><br /><br />
+    <textarea>textarea</textarea><br />
+</form>
+</div>
+</body>
+</html>
Added: trunk/demos/dialog/modal_message.html
==============================================================================
--- (empty file)
+++ trunk/demos/dialog/modal_message.html    Mon Dec 29 09:26:17 2008
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Dialog - Buttons Demo</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.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">
+    $(function() {
+        $("#dialog").dialog({
+            modal: true,
+            overlay: {
+                backgroundColor: '#000',
+                opacity: 0.5
+            },
+            buttons: {
+                Ok: function() {
+                    alert('You clicked Ok!');
+                }
+            }
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div id="dialog" title="Modal message dialog">
+

A modal message dialog like this is useful for providing information
to the user that requires them to explicitly acknowledge before continuing
with their work.

This example adds a button bar with a single 'ok'
button to dismiss the dialog.

+</div>
+
+
+
+
+<div style="padding:20px;">
+