diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2008-12-29 02:20:43 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2008-12-29 02:20:43 +0000 |
| commit | 94c4bcde691781c91df1c3a69063cfa17dc88c2a (patch) | |
| tree | 016becd7d4522da43af160b6572e68432ca4d570 /demos/dialog | |
| parent | 9d78a899bc439b9a94cd9253563320fdb5668e35 (diff) | |
| download | jquery-ui-94c4bcde691781c91df1c3a69063cfa17dc88c2a.tar.gz jquery-ui-94c4bcde691781c91df1c3a69063cfa17dc88c2a.zip | |
Dialog: Added demos for buttons and modal.
Diffstat (limited to 'demos/dialog')
| -rw-r--r-- | demos/dialog/buttons.html | 35 | ||||
| -rw-r--r-- | demos/dialog/index.html | 2 | ||||
| -rw-r--r-- | demos/dialog/modal.html | 45 |
3 files changed, 82 insertions, 0 deletions
diff --git a/demos/dialog/buttons.html b/demos/dialog/buttons.html new file mode 100644 index 000000000..309f2e835 --- /dev/null +++ b/demos/dialog/buttons.html @@ -0,0 +1,35 @@ +<!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/index.html b/demos/dialog/index.html index 34666311e..5880f315b 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -9,6 +9,8 @@ <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>
</dl>
</body>
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html new file mode 100644 index 000000000..ef97aa02f --- /dev/null +++ b/demos/dialog/modal.html @@ -0,0 +1,45 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Modal 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 + } + });
+ });
+ </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>
+ +<div> +<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 /> + <textarea>textarea</textarea><br /> +</form> +</div>
+</body>
+</html>
|