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

来源：互联网发布：mac文明编辑：程序博客网时间：2024/06/14 09:39
本篇使用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
0 0