jQuery 入门教程(35): jQuery UI Dialog 示例（三）
本篇使用Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<style> |
10 |
body { |
11 |
font-size: 62.5%; |
12 |
} |
13 |
14 |
label, input { |
15 |
display: block; |
16 |
} |
17 |
18 |
input.text { |
19 |
margin-bottom: 12px; |
20 |
width: 95%; |
21 |
padding: .4em; |
22 |
} |
23 |
24 |
fieldset { |
25 |
padding: 0; |
26 |
border: 0; |
27 |
margin-top: 25px; |
28 |
} |
29 |
30 |
h1 { |
31 |
font-size: 1.2em; |
32 |
margin: .6em 0; |
33 |
} |
34 |
35 |
div#users-contain { |
36 |
width: 350px; |
37 |
margin: 20px 0; |
38 |
} |
39 |
40 |
div#users-contain table { |
41 |
margin: 1em 0; |
42 |
border-collapse: collapse; |
43 |
width: 100%; |
44 |
} |
45 |
46 |
div#users-contain table td, div#users-contain table th { |
47 |
border: 1px solid #eee; |
48 |
padding: .6em 10px; |
49 |
text-align: left; |
50 |
} |
51 |
52 |
.ui-dialog .ui-state-error { |
53 |
padding: .3em; |
54 |
} |
55 |
56 |
.validateTips { |
57 |
border: 1px solid transparent; |
58 |
padding: 0.3em; |
59 |
} |
60 |
</style> |
61 |
<!-- ReSharper disable ExpressionIsAlwaysConst --> |
62 |
<script> |
63 |
$(function () { |
64 |
var name = $("#name"), |
65 |
email = $("#email"), |
66 |
password = $("#password"), |
67 |
allFields = $([]).add(name).add(email).add(password), |
68 |
tips = $(".validateTips"); |
69 |
70 |
function updateTips(t) { |
71 |
tips |
72 |
.text(t) |
73 |
.addClass("ui-state-highlight"); |
74 |
setTimeout(function () { |
75 |
tips.removeClass("ui-state-highlight", 1500); |
76 |
}, 500); |
77 |
} |
78 |
79 |
function checkLength(o, n, min, max) { |
80 |
if (o.val().length > max || o.val().length < min) { |
81 |
o.addClass("ui-state-error"); |
82 |
updateTips("Length of " + n + " must be between " + |
83 |
min + " and " + max + "."); |
84 |
return false; |
85 |
} else { |
86 |
return true; |
87 |
} |
88 |
} |
89 |
90 |
function checkRegexp(o, regexp, n) { |
91 |
if (!(regexp.test(o.val()))) { |
92 |
o.addClass("ui-state-error"); |
93 |
updateTips(n); |
94 |
return false; |
95 |
} else { |
96 |
return true; |
97 |
} |
98 |
} |
99 |
100 |
$("#dialog-form").dialog({ |
101 |
autoOpen: false, |
102 |
height: 300, |
103 |
width: 350, |
104 |
modal: true, |
105 |
buttons: { |
106 |
"Create an account": function () { |
107 |
var bValid = true; |
108 |
allFields.removeClass("ui-state-error"); |
109 |
110 |
bValid = bValid && checkLength(name, "username", 3, 16); |
111 |
bValid = bValid && checkLength(email, "email", 6, 80); |
112 |
bValid = bValid && checkLength(password, "password", 5, 16); |
113 |
114 |
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, |
115 |
"Username may consist of a-z, 0-9, " + |
116 |
"underscores, begin with a letter."); |
117 |
// From jquery.validate.js (by joern), |
118 |
// contributed by Scott Gonzalez: |
119 |
// http://projects.scottsplayground.com/email_address_validation/ |
120 |
bValid = bValid && checkRegexp(email, |
121 |
/^((([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"); |
122 |
bValid = bValid && checkRegexp(password, |
123 |
/^([0-9a-zA-Z])+$/, |
124 |
"Password field only allow : a-z 0-9"); |
125 |
126 |
if (bValid) { |
127 |
$("#users tbody").append("<tr>" + |
128 |
"<td>" + name.val() + "</td>" + |
129 |
"<td>" + email.val() + "</td>" + |
130 |
"<td>" + password.val() + "</td>" + |
131 |
"</tr>"); |
132 |
$(this).dialog("close"); |
133 |
} |
134 |
}, |
135 |
Cancel: function () { |
136 |
$(this).dialog("close"); |
137 |
} |
138 |
}, |
139 |
close: function () { |
140 |
allFields.val("").removeClass("ui-state-error"); |
141 |
} |
142 |
}); |
143 |
144 |
$("#create-user") |
145 |
.button() |
146 |
.click(function () { |
147 |
$("#dialog-form").dialog("open"); |
148 |
}); |
149 |
}); |
150 |
</script> |
151 |
<!-- ReSharper restore ExpressionIsAlwaysConst --> |
152 |
</head> |
153 |
<body> |
154 |
155 |
<div id="dialog-form" title="Create new user"> |
156 |
<p class="validateTips">All form fields are required.</p> |
157 |
158 |
<form> |
159 |
<fieldset> |
160 |
<label for="name">Name</label> |
161 |
<input type="text" name="name" id="name" |
162 |
class= "text ui-widget-content ui-corner-all" /> |
163 |
<label for="email">Email</label> |
164 |
<input type="text" name="email" id="email" |
165 |
value="" class="text ui-widget-content ui-corner-all" /> |
166 |
<label for="password">Password</label> |
167 |
<input type="password" name="password" |
168 |
id="password" value="" |
169 |
class="text ui-widget-content ui-corner-all" /> |
170 |
</fieldset> |
171 |
</form> |
172 |
</div> |
173 |
174 |
175 |
<div id="users-contain" class="ui-widget"> |
176 |
<h1>Existing Users:</h1> |
177 |
<table id="users" class="ui-widget ui-widget-content"> |
178 |
<thead> |
179 |
<tr class="ui-widget-header "> |
180 |
<th>Name</th> |
181 |
<th>Email</th> |
182 |
<th>Password</th> |
183 |
</tr> |
184 |
</thead> |
185 |
<tbody> |
186 |
<tr> |
187 |
<td>John Doe</td> |
188 |
<td>john.doe@example.com</td> |
189 |
<td>johndoe1</td> |
190 |
</tr> |
191 |
</tbody> |
192 |
</table> |
193 |
</div> |
194 |
<button id="create-user">Create new user</button> |
195 |
196 |
197 |
</body> |
198 |
</html> |
