aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorTodd Parker <fg.todd@gmail.com>2008-12-30 17:47:22 +0000
committerTodd Parker <fg.todd@gmail.com>2008-12-30 17:47:22 +0000
commit9f2c52eafd877c6b809c357eeec257504d969128 (patch)
treeddf06b6da7dc2dc0e8288a4fe1905a63cbac1b3b /demos
parentc18b499330fb29dac2bbdf6a7b3341ea24a17fbd (diff)
downloadjquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.tar.gz
jquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.zip
Added demo wrapper divs, description text and improved sample data
Diffstat (limited to 'demos')
-rw-r--r--demos/dialog/default.html36
-rw-r--r--demos/dialog/modal.html54
-rw-r--r--demos/dialog/modal_confirmation.html58
-rw-r--r--demos/dialog/modal_form.html55
-rw-r--r--demos/dialog/modal_message.html51
5 files changed, 169 insertions, 85 deletions
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
index a51238401..ebef1426e 100644
--- a/demos/dialog/default.html
+++ b/demos/dialog/default.html
@@ -17,10 +17,38 @@
</head>
<body>
-<div id="dialog" title="Basic dialog">
- <p>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></p>
- <p>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. </p>
-</div>
+<div class="demo">
+
+ <div id="dialog" title="Basic dialog">
+ <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
+ </div>
+
+ <!-- Sample page content to illustrate the layering of the dialog -->
+ <div class="hiddenInViewSource" style="padding:20px;">
+ <p>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.</p>
+ <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>
+ <p>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.</p>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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></p>
+<p>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. </p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
index f4e573305..a06451b5e 100644
--- a/demos/dialog/modal.html
+++ b/demos/dialog/modal.html
@@ -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">
- <p>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.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
-</div>
-
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->
-<div style="padding:20px;">
-<p>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.</p>
-<p>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.</p>
-<p>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.</p>
-<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">
+ <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
+ </div>
+
+ <!-- Sample page content to illustrate the layering of the dialog -->
+ <div class="hiddenInViewSource" style="padding:20px;">
+ <p>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.</p>
+ <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>
+ <p>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.</p>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html
index 1f5829866..2e4d264ca 100644
--- a/demos/dialog/modal_confirmation.html
+++ b/demos/dialog/modal_confirmation.html
@@ -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">
- <p>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.</p></div>
-
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->
-<div style="padding:20px;">
-<p>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.</p>
-<p>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.</p>
-<p>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.</p>
-<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?">
+ <p><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?</p>
+ </div>
+
+ <!-- Sample page content to illustrate the layering of the dialog -->
+ <div class="hiddenInViewSource" style="padding:20px;">
+ <p>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.</p>
+ <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>
+ <p>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.</p>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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.</p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html
index 1114b0ab1..dd1053c25 100644
--- a/demos/dialog/modal_form.html
+++ b/demos/dialog/modal_form.html
@@ -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">
- <p>Example of a form placed inside a dialog.</p>
+
+
+
+<div class="demo">
+
+<div id="dialog" title="Create new user">
+ <p>All form fields are required.</p>
<form>
<fieldset>
@@ -54,24 +59,32 @@
<input type="password" name="password" id="password" value="" class="text" />
</fieldset>
</form>
-</div>
-
-
+</div>
+
+ <!-- Sample page content to illustrate the layering of the dialog -->
+ <div class="hiddenInViewSource" style="padding:20px;">
+ <p>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.</p>
+ <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>
+ <p>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.</p>
+</div><!-- End sample page content -->
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->
-<div style="padding:20px;">
-<p>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.</p>
-<p>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.</p>
-<p>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.</p>
-<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><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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.</p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html
index d3f5b4922..3d41897d9 100644
--- a/demos/dialog/modal_message.html
+++ b/demos/dialog/modal_message.html
@@ -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">
- <p>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. </p><p>This example adds a button bar with a single 'ok' button to dismiss the dialog.</p>
+<div id="dialog" title="Download complete">
+ <p><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.</p>
+ <p>Currently using <b>36% of your storage space</b>.</p>
</div>
+<div class="demo">
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->
-<div style="padding:20px;">
-<p>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.</p>
-<p>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.</p>
-<p>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.</p>
-<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 id="dialog" title="Basic dialog">
+ <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
+ </div>
+
+ <!-- Sample page content to illustrate the layering of the dialog -->
+ <div class="hiddenInViewSource" style="padding:20px;">
+ <p>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.</p>
+ <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>
+ <p>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.</p>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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. </p><p>This example adds a button bar with a single 'Ok' button to dismiss the dialog.</p>
+
+</div><!-- End demo-description -->
</body>
</html>