diff options
| author | Maggie Costello Wachs <fg.maggie@gmail.com> | 2009-01-20 20:09:55 +0000 |
|---|---|---|
| committer | Maggie Costello Wachs <fg.maggie@gmail.com> | 2009-01-20 20:09:55 +0000 |
| commit | 25c6c7e7ef0ffef2f1dcf4e4f5ed2ad160e1464d (patch) | |
| tree | 439e35295ccca794e56b83c73264051035810bc5 | |
| parent | 134d8bd5d27ca95e891475a96dbb7de7f4cf0a1b (diff) | |
| download | jquery-ui-25c6c7e7ef0ffef2f1dcf4e4f5ed2ad160e1464d.tar.gz jquery-ui-25c6c7e7ef0ffef2f1dcf4e4f5ed2ad160e1464d.zip | |
slightly reorganized/renamed demos to better reflect functionality
| -rw-r--r-- | demos/dialog/default.html | 14 | ||||
| -rw-r--r-- | demos/dialog/index.html | 2 | ||||
| -rw-r--r-- | demos/dialog/modal.html | 11 | ||||
| -rw-r--r-- | demos/dialog/modal_confirmation.html | 8 | ||||
| -rw-r--r-- | demos/dialog/modal_form.html | 7 | ||||
| -rw-r--r-- | demos/dialog/modal_message.html | 10 |
6 files changed, 11 insertions, 41 deletions
diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 08043d15b..79bd0157f 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,7 +1,7 @@ <!doctype html> <html lang="en"> <head> - <title>jQuery UI Dialog - Default Demo</title> + <title>jQuery UI Dialog - Default functionality</title> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.3.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> @@ -43,17 +43,7 @@ <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 dialog content element, like this: -</p> - -<pre><code>$("#dialog").dialog(); -</code></pre> - -<p> -A basic dialog window has a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. -</p> +<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> </div><!-- End demo-description --> diff --git a/demos/dialog/index.html b/demos/dialog/index.html index a9a9bf070..28628a085 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -9,7 +9,7 @@ <div class="demos-nav"> <h4>Examples</h4> <ul> - <li class="demo-config-on"><a href="default.html">Default Dialog</a></li> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> <li><a href="modal.html">Modal dialog</a></li> <li><a href="modal_message.html">Modal message</a></li> <li><a href="modal_confirmation.html">Modal confirmation</a></li> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 52cf8b220..6bde93f45 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,7 +1,7 @@ <!doctype html> <html lang="en"> <head> - <title>jQuery UI Dialog - Modal Demo</title> + <title>jQuery UI Dialog - Basic modal</title> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.3.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> @@ -51,14 +51,7 @@ <div class="demo-description"> -<p> -This is a simple modal dialog with a semi-transparent overlay layer added as an option to dim out the page content behind it and bring the user's attention to the dialog. -A modal dialog prevents the user from interacting with the rest of the page until it is closed. -</p> - -<p> -The dialog window can be moved, resized and closed with the 'x' icon. -</p> +<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed. To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the <strong>overlay</strong> option.</p> </div><!-- End demo-description --> diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html index 5ffeaa139..ae036499e 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 - Modal Confirmation Demo</title> + <title>jQuery UI Dialog - Modal confirmation</title> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.3.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> @@ -59,11 +59,7 @@ <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 an icon from the css sprite set and is set to be not resizable by setting the resizable option to false. -</p> +<p>Confirm an action that may be destructive or important. Set the <strong>modal</strong> option to true, and specify primary and secondary user actions with the <strong>buttons</strong> option.</p> </div><!-- End demo-description --> diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html index ecd9fd8b0..31ed9b746 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 - Modal Form Demo</title> + <title>jQuery UI Dialog - Modal form</title> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.3.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> @@ -74,10 +74,7 @@ <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> +<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <strong>modal</strong> option to true, and specify primary and secondary user actions with the <strong>buttons</strong> option.</p> </div><!-- End demo-description --> diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html index fbdc4de99..8483dec16 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 - Modal Message Demo</title> + <title>jQuery UI Dialog - Modal message</title> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.3.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> @@ -60,13 +60,7 @@ <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> +<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <strong>modal</strong> option to true, and specify a primary action (Ok) with the <strong>buttons</strong> option.</p> </div><!-- End demo-description --> |