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