Added demo wrapper divs, description text and improved sample data

author: Todd Parker <fg.todd@gmail.com> 2008-12-30 17:47:22 +0000
committer: Todd Parker <fg.todd@gmail.com> 2008-12-30 17:47:22 +0000
commit: 9f2c52eafd877c6b809c357eeec257504d969128 (patch)
tree: ddf06b6da7dc2dc0e8288a4fe1905a63cbac1b3b /demos/dialog
parent: c18b499330fb29dac2bbdf6a7b3341ea24a17fbd (diff)
download: jquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.tar.gz
jquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.zip
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>
author	Todd Parker <fg.todd@gmail.com>	2008-12-30 17:47:22 +0000
committer	Todd Parker <fg.todd@gmail.com>	2008-12-30 17:47:22 +0000
commit	9f2c52eafd877c6b809c357eeec257504d969128 (patch)
tree	ddf06b6da7dc2dc0e8288a4fe1905a63cbac1b3b /demos/dialog
parent	c18b499330fb29dac2bbdf6a7b3341ea24a17fbd (diff)
download	jquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.tar.gz jquery-ui-9f2c52eafd877c6b809c357eeec257504d969128.zip