jQuery UI 弹出注册窗口_练习
还是直接看源码吧:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="GBK" />
5 <title>注册页面小练习</title>
6 <!--引入 YUI all 样式表-->
7 <link type="text/css" href="../jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
8 <!--引入 所需的脚本文件-->
9 <script type="text/javascript" src="../jquery_ui/development-bundle/jquery-1.4.2.js"></script>
10 <script type="text/javascript" src="../jquery_ui/development-bundle/external/jquery.bgiframe-2.1.1.js"></script>
11 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
12 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
13 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.mouse.js"></script>
14 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.button.js"></script>
15 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.draggable.js"></script>
16 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.position.js"></script>
17 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.resizable.js"></script>
18 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.dialog.js"></script>
19 <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.effects.core.js"></script>
20 <!--引入额外的样式文件-->
21 <link type="text/css" href="../jquery_ui/development-bundle/demos/demos.css" rel="stylesheet" />
22 <!--页面样式-->
23 <style type="text/css">
24 body { font-size: 62.5%; }
25 label, input { display:block; }
26 input.text { margin-bottom:12px; width:95%; padding: .4em; }
27 fieldset { padding:0; border:0; margin-top:25px; }
28 h1 { font-size: 1.2em; margin: .6em 0; }
29 div#users-contain { width: 350px; margin: 20px 0; }
30 div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
31 div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
32 .ui-dialog .ui-state-error { padding: .3em; }
33 .validateTips { border: 1px solid transparent; padding: 0.3em; }
34 </style>
35 <script type="text/javascript">
36
37 jQuery(document).ready(function(){
38
39 /**
40 //注意这里的变量设置
41 var $name = jQuery('#name');
42 var $email = jQuery('#email');
43 var $password = jQuery('#password');
44 var $repeatpd = jQuery('#repeatpd');
45 var $allFields = jQuery([]).add($name).add($email).add($password).add($repeatpd);//方法的连缀
46 var $tips = jQuery('.validateTips');
47 //对话框
48 var $dialogform = jQuery('#dialog-form');
49 //按钮
50 var $createuser = jQuery('#create-user');
51 */
52
53 //为方便起见,可以这样，更具有可读性
54 var $name = jQuery('#name'),
55 $email = jQuery('#email'),
56 $password = jQuery('#password'),
57 $repeatpd = jQuery('#repeatpd'),
58 $allFields = jQuery([])//方法的连缀
59 .add($name)
60 .add($email)
61 .add($password)
62 .add($repeatpd),
63 $tips = jQuery('.validateTips'),
64 //对话框
65 $dialogform = jQuery('#dialog-form'),
66 //按钮
67 $createuser = jQuery('#create-user');
68
69 //自定义函数_更新 Tips
70 function updateTips(msg){
71 $tips
72 .text(msg)//改变文本
73 .addClass('ui-state-highlight');//添加样式
74 setTimeout(function(){
75 $tips.removeClass('ui-state-highlight', 2000);//去除此样式有一个两秒的渐变过程
76 }, 500);//在 0.5 后执行
77 }
78
79 //检查填入各项字符的长度
80 function checkLength(obj, textName, minLen, maxLen){
81 var realLen = obj.val().length;
82 if(realLen > maxLen || realLen < minLen){
83 obj
84 .addClass('ui-state-error')
85 .focus();
86 updateTips(textName + "的长度必须在指定的范围内：（" + minLen + "<" + textName + "<" + maxLen +"）");
87 return false;
88 } else {return true;}
89 }
90
91 //检查密码确认框
92 function checkPass(){
93 if($password.val() != $repeatpd.val()){
94 updateTips("密码确认不一致！");
95 $repeatpd
96 .addClass('ui-state-error')
97 .focus();
98 return false;
99 } else {return true;}
100 }
101
102 //检查正则匹配
103 function checkRegexThis(obj, Regex, text){
104 if(!(Regex.test(obj.val()))){
105 obj.addClass('ui-state-error');
106 updateTips(text);
107 return false;
108 } else {return true;}
109 }
110
111 //为 "#dialog-form" 元素绑定对话框事件,设置完后 "#dialog-form" 会自动隐藏
112 $dialogform.dialog({
113 //取消对话框的自动打开
114 autoOpen: false,
115 modal: true,
116 height: 350,
117 width: 340,
118 //设置对话框的按钮
119 buttons: {
120 '新建用户': function(){//回调函数
121 //这里是重点要注意的地方
122 var trueTag = true;//设置错误标记
123 $allFields.removeClass('ui-state-error');
124
125 //先检查各项的字符长度限制
126 trueTag = trueTag && checkLength($name, "用户名", 3, 16);
127 trueTag = trueTag && checkLength($email, "邮箱", 6, 80);
128 trueTag = trueTag && checkLength($password, "密码", 5, 16);
129 //trueTag = trueTag && checkLength($repeatpd, "密码", 5, 16);
130
131 //正则检查
132 trueTag = trueTag && checkRegexThis($name, /^[a-z]([0-9a-z_])+$/i, "用户名的格式不正确！");
133 trueTag = trueTag && checkRegexThis($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@example.com");
134 trueTag = trueTag && checkRegexThis($password, /^([0-9a-zA-Z])+$/, "密码格式不正确！");
135
136 //检查密码确认
137 trueTag = trueTag && checkPass();
138
139 //如果检查正确，则将记录写如表格
140 if(trueTag){
141 jQuery('#users tbody').append(
142 '<tr>' +
143 '<td>' + $name.val() + '</td>' +
144 '<td>' + $email.val() + '</td>' +
145 '<td>' + $password.val() + '</td>'
146 + '</tr>'
147 );
148 jQuery(this).dialog('close');
149 }
150 },
151
152 '取消': function(){
153 //点击“取消",我们只要把对话框关掉
154 jQuery(this).dialog('close');
155 //或者(最好使用 "this" 关键字)
156 //jQuery('#dialog-form').dialog('close');
157 //注意不能用:
158 //jQuery('#dialog-form').hide();
159 }
160 }
161 });
162
163 //绑定 id: "create-user" button 元素的单击事件
164 $createuser
165 .button() //注意方法的连缀
166 .click(function(){
167 $tips.text('所有项均为必填项');
168 $allFields.val('');
169 $dialogform.dialog('open');//打开对话框
170 });
171 //注意写代码的次序，在调用弹出框窗口的时候，应该已经定义好了 "#dialog-form" 的 dialog 属性
172
173 });
174
175 </script>
176 </head>
177
178 <body>
179 <div class="demo">
180
181 <!--下面是将要现实的弹出框注册区域-->
182 <div id="dialog-form" title="新建用户">
183 <p class="validateTips"></p>
184
185 <form>
186 <fieldset>
187 <label for="name">用户名[A~Za~z0~9](3-16 位, 并且以字母开头)</label>
188 <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
189 <label for="email">注册邮箱(6-80 位)</label>
190 <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
191 <label for="password">密码(5-16 位)</label>
192 <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
193 <label for="repeatpd">重复密码</label>
194 <input type="password" name="repeatpd" id="repeatpd" value="" class="text ui-widget-content ui-corner-all" />
195 </fieldset>
196 </form>
197 </div>
198
199
200 <div id="users-contain" class="ui-widget">
201
202 <h1>已存在的用户:</h1>
203
204
205 <table id="users" class="ui-widget ui-widget-content">
206 <thead>
207 <tr class="ui-widget-header ">
208 <th>用户名</th>
209 <th>邮箱</th>
210 <th>密码</th>
211 </tr>
212 </thead>
213 <tbody>
214 <tr>
215 <td>涅槃的猫</td>
216 <td>catprayer@example.com</td>
217 <td>catprayer</td>
218 </tr>
219 </tbody>
220 </table>
221 </div>
222 <button id="create-user">点击我！</button>
223
224 </div><!-- 结束例子 -->
225 </body>
226 </html>
