|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
5 <title>jQuery UI Dialog - Modal form</title> |
|
6 <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
|
7 <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
|
8 <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> |
|
9 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
|
10 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
|
11 <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> |
|
12 <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> |
|
13 <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> |
|
14 <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> |
|
15 <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> |
|
16 <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> |
|
17 <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> |
|
18 <link type="text/css" href="../demos.css" rel="stylesheet" /> |
|
19 <style type="text/css"> |
|
20 body { font-size: 62.5%; } |
|
21 label, input { display:block; } |
|
22 input.text { margin-bottom:12px; width:95%; padding: .4em; } |
|
23 fieldset { padding:0; border:0; margin-top:25px; } |
|
24 h1 { font-size: 1.2em; margin: .6em 0; } |
|
25 div#users-contain { width: 350px; margin: 20px 0; } |
|
26 div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } |
|
27 div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } |
|
28 .ui-dialog .ui-state-error { padding: .3em; } |
|
29 .validateTips { border: 1px solid transparent; padding: 0.3em; } |
|
30 |
|
31 </style> |
|
32 <script type="text/javascript"> |
|
33 $(function() { |
|
34 // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! |
|
35 $("#dialog").dialog("destroy"); |
|
36 |
|
37 var name = $("#name"), |
|
38 email = $("#email"), |
|
39 password = $("#password"), |
|
40 allFields = $([]).add(name).add(email).add(password), |
|
41 tips = $(".validateTips"); |
|
42 |
|
43 function updateTips(t) { |
|
44 tips |
|
45 .text(t) |
|
46 .addClass('ui-state-highlight'); |
|
47 setTimeout(function() { |
|
48 tips.removeClass('ui-state-highlight', 1500); |
|
49 }, 500); |
|
50 } |
|
51 |
|
52 function checkLength(o,n,min,max) { |
|
53 |
|
54 if ( o.val().length > max || o.val().length < min ) { |
|
55 o.addClass('ui-state-error'); |
|
56 updateTips("Length of " + n + " must be between "+min+" and "+max+"."); |
|
57 return false; |
|
58 } else { |
|
59 return true; |
|
60 } |
|
61 |
|
62 } |
|
63 |
|
64 function checkRegexp(o,regexp,n) { |
|
65 |
|
66 if ( !( regexp.test( o.val() ) ) ) { |
|
67 o.addClass('ui-state-error'); |
|
68 updateTips(n); |
|
69 return false; |
|
70 } else { |
|
71 return true; |
|
72 } |
|
73 |
|
74 } |
|
75 |
|
76 $("#dialog-form").dialog({ |
|
77 autoOpen: false, |
|
78 height: 300, |
|
79 width: 350, |
|
80 modal: true, |
|
81 buttons: { |
|
82 'Create an account': function() { |
|
83 var bValid = true; |
|
84 allFields.removeClass('ui-state-error'); |
|
85 |
|
86 bValid = bValid && checkLength(name,"username",3,16); |
|
87 bValid = bValid && checkLength(email,"email",6,80); |
|
88 bValid = bValid && checkLength(password,"password",5,16); |
|
89 |
|
90 bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); |
|
91 // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ |
|
92 bValid = bValid && checkRegexp(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@jquery.com"); |
|
93 bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); |
|
94 |
|
95 if (bValid) { |
|
96 $('#users tbody').append('<tr>' + |
|
97 '<td>' + name.val() + '</td>' + |
|
98 '<td>' + email.val() + '</td>' + |
|
99 '<td>' + password.val() + '</td>' + |
|
100 '</tr>'); |
|
101 $(this).dialog('close'); |
|
102 } |
|
103 }, |
|
104 Cancel: function() { |
|
105 $(this).dialog('close'); |
|
106 } |
|
107 }, |
|
108 close: function() { |
|
109 allFields.val('').removeClass('ui-state-error'); |
|
110 } |
|
111 }); |
|
112 |
|
113 |
|
114 |
|
115 $('#create-user') |
|
116 .button() |
|
117 .click(function() { |
|
118 $('#dialog-form').dialog('open'); |
|
119 }); |
|
120 |
|
121 }); |
|
122 </script> |
|
123 </head> |
|
124 <body> |
|
125 |
|
126 <div class="demo"> |
|
127 |
|
128 <div id="dialog-form" title="Create new user"> |
|
129 <p class="validateTips">All form fields are required.</p> |
|
130 |
|
131 <form> |
|
132 <fieldset> |
|
133 <label for="name">Name</label> |
|
134 <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> |
|
135 <label for="email">Email</label> |
|
136 <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> |
|
137 <label for="password">Password</label> |
|
138 <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> |
|
139 </fieldset> |
|
140 </form> |
|
141 </div> |
|
142 |
|
143 |
|
144 <div id="users-contain" class="ui-widget"> |
|
145 |
|
146 <h1>Existing Users:</h1> |
|
147 |
|
148 |
|
149 <table id="users" class="ui-widget ui-widget-content"> |
|
150 <thead> |
|
151 <tr class="ui-widget-header "> |
|
152 <th>Name</th> |
|
153 <th>Email</th> |
|
154 <th>Password</th> |
|
155 </tr> |
|
156 </thead> |
|
157 <tbody> |
|
158 <tr> |
|
159 <td>John Doe</td> |
|
160 <td>john.doe@example.com</td> |
|
161 <td>johndoe1</td> |
|
162 </tr> |
|
163 </tbody> |
|
164 </table> |
|
165 </div> |
|
166 <button id="create-user">Create new user</button> |
|
167 |
|
168 </div><!-- End demo --> |
|
169 |
|
170 <div class="demo-description"> |
|
171 |
|
172 <p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> |
|
173 |
|
174 </div><!-- End demo-description --> |
|
175 |
|
176 </body> |
|
177 </html> |