jQuery 入门教程(35): jQuery UI Dialog 示例（三）

最新推荐文章于 2016-12-30 15:01:00 发布

iteye_19603

最新推荐文章于 2016-12-30 15:01:00 发布

阅读量112

点赞数

文章标签： javascript ui ViewUI

本篇使用Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<style> 
 
body { 
 
font-size: 62.5%; 
 
} 
 
    13
 
label, input { 
 
display: block; 
 
} 
 
    17
 
input.text { 
 
margin-bottom: 12px; 
 
width: 95%; 
 
padding: .4em; 
 
} 
 
    23
 
fieldset { 
 
padding: 0; 
 
border: 0; 
 
margin-top: 25px; 
 
} 
 
    29
 
h1 { 
 
font-size: 1.2em; 
 
margin: .6em 0; 
 
} 
 
    34
 
div#users-contain { 
 
width: 350px; 
 
margin: 20px 0; 
 
} 
 
    39
 
div#users-contain table { 
 
margin: 1em 0; 
 
border-collapse: collapse; 
 
width: 100%; 
 
} 
 
    45
 
div#users-contain table td, div#users-contain table th { 
 
border: 1px solid #eee; 
 
padding: .6em 10px; 
 
text-align: left; 
 
} 
 
    51
 
.ui-dialog .ui-state-error { 
 
padding: .3em; 
 
} 
 
    55
 
.validateTips { 
 
border: 1px solid transparent; 
 
padding: 0.3em; 
 
} 
 
</style> 
 
    61<!-- ReSharper disable ExpressionIsAlwaysConst -->
 
<script> 
 
$(function () { 
 
var name = $("#name"), 
 
email = $("#email"), 
 
password = $("#password"), 
 
allFields = $([]).add(name).add(email).add(password), 
 
tips = $(".validateTips"); 
 
    69
 
function updateTips(t) { 
 
tips 
 
.text(t) 
 
.addClass("ui-state-highlight"); 
 
setTimeout(function () { 
 
tips.removeClass("ui-state-highlight", 1500); 
 
}, 500); 
 
} 
 
    78
 
function checkLength(o, n, min, max) { 
 
if (o.val().length > max || o.val().length <min) { 
 
o.addClass("ui-state-error"); 
 
updateTips("Length of " + n + " must be between " + 
 
min + " and " + max + "."); 
 
return false; 
 
} else { 
 
return true; 
 
} 
 
} 
 
    89
 
function checkRegexp(o, regexp, n) { 
 
if (!(regexp.test(o.val()))) { 
 
o.addClass("ui-state-error"); 
 
updateTips(n); 
 
return false; 
 
} else { 
 
return true; 
 
} 
 
} 
 
    99
 
$("#dialog-form").dialog({ 
 
autoOpen: false, 
 
height: 300, 
 
width: 350, 
 
modal: true, 
 
buttons: { 
 
"Create an account": function () { 
 
varbValid=true; 
 
allFields.removeClass("ui-state-error"); 
 
    109
 
bValid= bValid && checkLength(name, "username", 3, 16); 
 
bValid= bValid && checkLength(email, "email", 6, 80); 
 
bValid= bValid && checkLength(password, "password", 5, 16); 
 
    113
 
bValid= bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, 
 
"Username may consist of a-z, 0-9, " + 
 
"underscores, begin with a letter."); 
 
// From jquery.validate.js (by joern), 
 
// contributed by Scott Gonzalez: 
 
// http://projects.scottsplayground.com/email_address_validation/ 
 
bValid= bValid && checkRegexp(email, 
 
/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com"); 
 
bValid= bValid && checkRegexp(password, 
 
/^([0-9a-zA-Z])+$/, 
 
"Password field only allow : a-z 0-9"); 
 
    125
 
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("").removeClass("ui-state-error"); 
 
} 
 
}); 
 
    143
 
$("#create-user") 
 
.button() 
 
.click(function () { 
 
$("#dialog-form").dialog("open"); 
 
}); 
 
}); 
 
</script> 
 
    151<!-- ReSharper restore ExpressionIsAlwaysConst -->
 
</head> 
 
<body> 
 
    154
 
<divid="dialog-form"title="Create new user"> 
 
<pclass="validateTips">All form fields are required.</p> 
 
    157
 
<form> 
 
<fieldset> 
 
<labelfor="name">Name</label> 
 
<inputtype="text"name="name"id="name" 
 
class="text ui-widget-content ui-corner-all"/> 
 
<labelfor="email">Email</label> 
 
<inputtype="text"name="email"id="email" 
 
value=""class="text ui-widget-content ui-corner-all"/> 
 
<labelfor="password">Password</label> 
 
<inputtype="password"name="password" 
 
id="password"value="" 
 
class="text ui-widget-content ui-corner-all"/> 
 
</fieldset> 
 
</form> 
 
</div> 
 
    173
 
    174
 
<divid="users-contain"class="ui-widget"> 
 
<h1>Existing Users:</h1> 
 
<tableid="users"class="ui-widget ui-widget-content"> 
 
<thead> 
 
<trclass="ui-widget-header "> 
 
<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> 
 
<buttonid="create-user">Create new user</button> 
 
    195
 
    196
 
</body> 
 
</html>

« jQuery 入门教程(34): jQuer...

iteye_19603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(35): jQuery UI Dialog 示例（三）

本篇使用Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。1&lt;!doctype html&gt;2&lt;htmllang="en"&gt;3&lt;head&gt;4&lt;metacharset="utf-8"/&gt;5&lt;title&gt;j
复制链接

扫一扫