r1340 - trunk/demos/dialog

Author: fg.todd
Date: Tue Dec 30 09:47:22 2008
New Revision: 1340
Modified:
trunk/demos/dialog/default.html
trunk/demos/dialog/modal.html
trunk/demos/dialog/modal_confirmation.html
trunk/demos/dialog/modal_form.html
trunk/demos/dialog/modal_message.html
Log:
Added demo wrapper divs, description text and improved sample data
Modified: trunk/demos/dialog/default.html
==============================================================================
--- trunk/demos/dialog/default.html    (original)
+++ trunk/demos/dialog/default.html    Tue Dec 30 09:47:22 2008
@@ -17,10 +17,38 @@
</head>
<body>
-<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>
+<div class="demo">
+
+ <div id="dialog" title="Basic dialog">
+

This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.

+    </div>
+
+    
+    <div class="hiddenInViewSource" 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.

+    <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>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This is a default dialog which opens in a floating layer above the page
content protected with an iframe. It is created by simply calling .dialog
on the ID of the content like this: <pre>$("#dialog").dialog();</pre>

A basic dialog window has a title bar and a content area. If the
content length 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>
</html>
Modified: trunk/demos/dialog/modal.html
==============================================================================
--- trunk/demos/dialog/modal.html    (original)
+++ trunk/demos/dialog/modal.html    Tue Dec 30 09:47:22 2008
@@ -11,7 +11,8 @@
    <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
    <script type="text/javascript">
    $(function() {
-        $("#dialog").dialog({
+        $("#dialog").dialog({
+            height:140,
            modal: true,
            overlay: {
                backgroundColor: '#000',
@@ -23,25 +24,38 @@
</head>
<body>
-<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 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>
+
+<div class="demo">
+
+    <div id="dialog" title="Basic modal dialog">
+

Adding the modal overlay screen makes the dialog look more prominent
because it dims out the page content.

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

+</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This is identical to the default dialog except a semi-transparent
overlay layer is added as an option to make this look more modal and dim
out the page content behind it to bring the user's attention to the
dialog.

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

+
+</div>
+
</body>
</html>
Modified: trunk/demos/dialog/modal_confirmation.html
==============================================================================
--- trunk/demos/dialog/modal_confirmation.html    (original)
+++ trunk/demos/dialog/modal_confirmation.html    Tue Dec 30 09:47:22 2008
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Dialog - Buttons Demo</title>
+    <title>jQuery UI Dialog - Modal Confirmation 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>
@@ -12,14 +12,16 @@
    <script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
+            resizable:false,
+            height:140,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            buttons: {
-                'Delete this file': function() {
-                    alert('The user was deleted forever!');
+                'Delete all items in recycle bin': function() {
+                    alert('The items were deleted forever!');
                },
                Cancel: function() {
                    alert('You clicked Cancel. The dialog will now close.');
@@ -31,26 +33,38 @@
    </script>
</head>
<body>
-
-<div id="dialog" title="Modal confirmation dialog">
-

</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>
+<div class="demo">
+
+    <div id="dialog" title="Empty the recycle bin?">
+

<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px
20px 0;"></span>These items will be permanently deleted and cannot be
recovered. Are you sure?

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

+</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

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. This example uses the an icon from the css sprite set and is
set to be not resizable by setting this option to false.

+
+</div>
+
</body>
</html>
Modified: trunk/demos/dialog/modal_form.html
==============================================================================
--- trunk/demos/dialog/modal_form.html    (original)
+++ trunk/demos/dialog/modal_form.html    Tue Dec 30 09:47:22 2008
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Dialog - Buttons Demo</title>
+    <title>jQuery UI Dialog - Modal Form 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>
@@ -41,8 +41,13 @@
</head>
<body>
-<div id="dialog" title="Modal confirmation dialog">
-

Example of a form placed inside a dialog.

+
+
+
+<div class="demo">
+
+<div id="dialog" title="Create new user">
+

All form fields are required.

<form>
    <fieldset>
@@ -54,24 +59,32 @@
        <input type="password" name="password" id="password" value=""
class="text" />
    </fieldset>
    </form>
-</div>
-
-
+</div>
+
+    
+    <div class="hiddenInViewSource" style="padding:20px;">
+

+</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>
+</div>
+
+
+
+<div class="demo-description">
+
+

This is an example of how a dialog can be used for data entry by making
it larger and embedding a form into the content area. A multi-step wizard
could be created by extending this with a step navigation and forward and
back buttons.

+
+</div>
+
</body>
</html>
Modified: trunk/demos/dialog/modal_message.html
==============================================================================
--- trunk/demos/dialog/modal_message.html    (original)
+++ trunk/demos/dialog/modal_message.html    Tue Dec 30 09:47:22 2008
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Dialog - Buttons Demo</title>
+    <title>jQuery UI Dialog - Modal Message 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>
@@ -28,27 +28,42 @@
</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 id="dialog" title="Download complete">
+

<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0
7px 50px 0;"></span>Your files have downloaded successfully into the My
Downloads folder.

Currently using <b>36% of your storage space</b>.

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

This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.

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

+</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

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>
</body>
</html>