← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.7.1/development-bundle/demos/dialog/modal-form.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.7.1/development-bundle/demos/dialog/modal-form.html
 
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>