aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorTodd Parker <fg.todd@gmail.com>2008-12-29 17:26:17 +0000
committerTodd Parker <fg.todd@gmail.com>2008-12-29 17:26:17 +0000
commit9f91a25ca3945be7f06947b1a3eafc19eb8195de (patch)
tree1feade8733c044b33a6feb9f200c26ccf5776702 /demos
parent622f34aeb9b18fd9c891721547e8d030bafdf01f (diff)
downloadjquery-ui-9f91a25ca3945be7f06947b1a3eafc19eb8195de.tar.gz
jquery-ui-9f91a25ca3945be7f06947b1a3eafc19eb8195de.zip
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types.
Diffstat (limited to 'demos')
-rw-r--r--demos/dialog/buttons.html35
-rw-r--r--demos/dialog/default.html5
-rw-r--r--demos/dialog/index.html8
-rw-r--r--demos/dialog/modal.html10
-rw-r--r--demos/dialog/modal_confirmation.html56
-rw-r--r--demos/dialog/modal_form.html77
-rw-r--r--demos/dialog/modal_message.html54
7 files changed, 201 insertions, 44 deletions
diff --git a/demos/dialog/buttons.html b/demos/dialog/buttons.html
deleted file mode 100644
index 309f2e835..000000000
--- a/demos/dialog/buttons.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Dialog - Buttons 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>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#dialog").dialog({
- buttons: {
- Ok: function() {
- alert('You clicked Ok!');
- },
- Cancel: function() {
- alert('You clicked Cancel. The dialog will now close.');
- $(this).dialog('close');
- }
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div id="dialog" title="Curabitur augue">
- <p>Sed vel diam id libero rutrum convallis. 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>
-
-</body>
-</html>
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
index 828aae916..35fc392f2 100644
--- a/demos/dialog/default.html
+++ b/demos/dialog/default.html
@@ -17,8 +17,9 @@
</head>
<body>
-<div id="dialog" title="Curabitur augue">
- <p>Sed vel diam id libero rutrum convallis. 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 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>
</body>
diff --git a/demos/dialog/index.html b/demos/dialog/index.html
index 5880f315b..eb455ea5b 100644
--- a/demos/dialog/index.html
+++ b/demos/dialog/index.html
@@ -8,9 +8,11 @@
<dl class="nav">
<dt>Dialog</dt>
- <dd><a href="default.html">Default</a></dd>
- <dd><a href="buttons.html">Buttons</a></dd>
- <dd><a href="modal.html">Modal</a></dd>
+ <dd><a href="default.html">Basic dialog (default)</a></dd>
+ <dd><a href="modal.html">Modal dialog</a></dd>
+ <dd><a href="modal_message.html">Modal message</a></dd>
+ <dd><a href="modal_confirmation.html">Modal confirmation</a></dd>
+ <dd><a href="modal_form.html">Modal form</a></dd>
</dl>
</body>
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
index ef97aa02f..f4e573305 100644
--- a/demos/dialog/modal.html
+++ b/demos/dialog/modal.html
@@ -23,11 +23,12 @@
</head>
<body>
-<div id="dialog" title="Curabitur augue">
- <p>Sed vel diam id libero rutrum convallis. 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 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>
-<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>
@@ -37,9 +38,10 @@
<input type="radio" />radio<br />
<select>
<option>select</option>
- </select><br />
+ </select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div>
+
</body>
</html>
diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html
new file mode 100644
index 000000000..1f5829866
--- /dev/null
+++ b/demos/dialog/modal_confirmation.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Buttons 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>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#dialog").dialog({
+ modal: true,
+ overlay: {
+ backgroundColor: '#000',
+ opacity: 0.5
+ },
+ buttons: {
+ 'Delete this file': function() {
+ alert('The user was deleted forever!');
+ },
+ Cancel: function() {
+ alert('You clicked Cancel. The dialog will now close.');
+ $(this).dialog('close');
+ }
+ }
+ });
+ });
+ </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>
+
+</body>
+</html>
diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html
new file mode 100644
index 000000000..c30eac6bb
--- /dev/null
+++ b/demos/dialog/modal_form.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Buttons 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>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#dialog").dialog({
+ height: '300',
+ modal: true,
+ overlay: {
+ backgroundColor: '#000',
+ opacity: 0.5
+ },
+ buttons: {
+ 'Create user account': function() {
+ alert('The user was created!');
+ },
+ Cancel: function() {
+ alert('You clicked Cancel. The dialog will now close.');
+ $(this).dialog('close');
+ }
+ }
+ });
+ });
+ </script>
+
+ <!-- Styles for this demo page -->
+ <style type="text/css" media="screen">
+ label, input { display:block; }
+ input.text { margin-bottom:12px; width:95%; }
+ fieldset { padding:0; border:0; margin-top:25px; }
+ </style>
+
+</head>
+<body>
+
+<div id="dialog" title="Modal confirmation dialog">
+ <p>Example of a form placed inside a dialog.</p>
+
+ <form>
+ <fieldset>
+ <label for="name">Name</label>
+ <input type="text" name="name" id="name" class="text" />
+ <label for="email">Email</label>
+ <input type="text" name="email" id="birthday" value="" class="text" />
+ <label for="password">Password</label>
+ <input type="password" name="password" id="birthday" value="" class="text" />
+ </fieldset>
+ </form>
+</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>
+</body>
+</html>
diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html
new file mode 100644
index 000000000..d3f5b4922
--- /dev/null
+++ b/demos/dialog/modal_message.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Buttons 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>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#dialog").dialog({
+ modal: true,
+ overlay: {
+ backgroundColor: '#000',
+ opacity: 0.5
+ },
+ buttons: {
+ Ok: function() {
+ alert('You clicked Ok!');
+ }
+ }
+ });
+ });
+ </script>
+</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>
+
+
+
+<!-- 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>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-09 20:11:40 +0000