jQuery 入门教程(35): jQuery UI Dialog 示例(三)分析

虾米哥 阅读:271 2021-04-01 09:58:11 评论:0


本篇使用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>

20130320008

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号