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

快来打我* 2024-02-17 14:11 120阅读 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+$/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 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读