library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dialog Demo: Beginning of new modal form demo.

Browse Source
This commit is contained in:
Scott González 2009-01-29 06:06:41 +00:00
parent 9592848de3
commit b0f7179462
1 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
demos/dialog/modal-form2.html Normal file
View File

@ -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">
<p>All form fields are required.</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="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">
<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 <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>