diff options
| -rw-r--r-- | demos/dialog/default.html | 36 | ||||
| -rw-r--r-- | demos/dialog/modal.html | 54 | ||||
| -rw-r--r-- | demos/dialog/modal_confirmation.html | 58 | ||||
| -rw-r--r-- | demos/dialog/modal_form.html | 55 | ||||
| -rw-r--r-- | demos/dialog/modal_message.html | 51 |
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>
|