r1846 - trunk/demos/dialog
Author: scott.gonzalez
Date: Wed Jan 28 22:06:41 2009
New Revision: 1846
Added:
trunk/demos/dialog/modal-form2.html
Log:
Dialog Demo: Beginning of new modal form demo.
Added: trunk/demos/dialog/modal-form2.html
==============================================================================
--- (empty file)
+++ trunk/demos/dialog/modal-form2.html Wed Jan 28 22:06:41 2009
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <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.1.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"
src="../../external/bgiframe/jquery.bgiframe.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ label, input { display:block; }
+ input.text { margin-bottom:12px; width:95%; }
+ fieldset { padding:0; border:0; margin-top:25px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ var name = $('#name'),
+ email = $('#email'),
+ password = $('#password'),
+ allFields = $([]).add(name).add(email).add(password);
+
+ $("#dialog").dialog({
+ autoOpen: false,
+ bgiframe: true,
+ height: 300,
+ modal: true,
+ buttons: {
+ 'Create user account': function() {
+ var bValid = true;
+ allFields
+ .removeClass('ui-state-error')
+ .each(function() {
+ if (!$(this).val().length) {
+ $(this).addClass('ui-state-error');
+ bValid = false;
+ }
+ });
+
+ if (bValid) {
+ $('#users tbody').append('<tr>' +
+ '<td>' + name.val() + '</td>' +
+ '<td>' + email.val() + '</td>' +
+ '<td>' + password.val() + '</td>' +
+ '</tr>');
+ $(this).dialog('close');
+ }
+ },
+ Cancel: function() {
+ $(this).dialog('close');
+ }
+ },
+ close: function() {
+ allFields.val('');
+ }
+ });
+
+ $('#create-user').click(function() {
+ $('#dialog').dialog('open');
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="dialog" title="Create new user">
+ All form fields are required.
+
+ <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="email" value="" class="text" />
+ <label for="password">Password</label>
+ <input type="password" name="password" id="password" value=""
class="text" />
+ </fieldset>
+ </form>
+</div>
+
+<a id="create-user" href="#">create new user</a>
+
+<table id="users">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Email</th>
+ <th>Password</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>John Doe</td>
+ <td>john.doe@example.com</td>
+ <td>johndoe1</td>
+ </tr>
+ </tbody>
+</table>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+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
<code>modal</code> option to true, and specify primary and secondary user
actions with the <code>buttons</code> option.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>