Renamed "complete" to "done" in order to avoid conflicts with jXHR.complete.
[jquery.git] / test / delegatetest.html
1 <html>
2     <head>
3         <script src='../dist/jquery.js' type='text/javascript'></script>
4         <style>
5         .red {
6             background-color: red;
7             border: solid 3px red;
8         }
9         </style>
10     </head>
11     <body>
12         <h2>Change Tests</h2>
13         <table>
14             <tr>
15                 <td>
16                 Change each:
17                 </td>
18                 <td>
19                 <select class='select_test'>
20                     <option value='one'>change me 1</option>
21                     <option value='two'>change me 2</option>
22                     <option value='three'>change me 3</option>
23                 </select>
24                 <select class='select_test'>
25                     <option value='one'>change me 1</option>
26                     <option value='two' selected="selected">change me 2</option>
27                     <option value='three'>change me 3</option>
28                 </select>
29                 </td>
30                 <td>
31                 <select class='mselect_test' multiple="multiple">
32                     <option value='one'>change me 1</option>
33                     <option value='two'>change me 2</option>
34                     <option value='three'>change me 3</option>
35                 </select>
36                 </td>
37                 <td>
38                 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
39                 <label for="checkbox1">Checkbox 1</label><br/>
40                 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
41                 <label for="checkbox2">Checkbox 2</label>
42                 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
43                 <label for="checkbox3">Checkbox 3</label>
44                 </td>
45                 </td>
46                 </td>
47                 <td>
48                 <input type="radio" class="radio_test" name="myradio" id="radio1"/>
49                 <label for="radio1">Radio1</label><br/>
50                 <input type="radio" class="radio_test" name="myradio" id="radio2"/>
51                 <label for="radio2">Radio2</label>
52                 <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
53                 <label for="radio3">Radio3</label>
54                 </td>
55                 <td>
56                 <input class="file_test" id="file1" type="file"/>
57                 <td>
58                 <input class='test' value='' id='input' size='10' />
59                 <input class='test' value='test' id='input2' size='10' readonly="readonly" />
60                 </td>
61                 <td>
62                 <textarea rows='2'></textarea>
63                 </td>
64                 <td>$(document).bind('change')</td>
65             </tr>
66             <tr>
67                 <td>Live:</td>
68                 <td id='select' class="red">SELECT</td>
69                 <td id='mselect' class="red">MULTI</td>
70                 <td id='checkbox' class="red">CHECKBOX</td>
71                 <td id='radio' class="red">RADIO</td>
72                 <td id='file' class="red">FILE</td>
73                 <td id='text' class="red">TEXT</td>
74                 <td id='textarea' class="red">TEXTAREA</td>
75                 <td id='boundChange' class="red">DOCUMENT</td>
76             </tr>
77             <tr>
78                 <td>Bind:</td>
79                 <td id='selectbind' class="red">SELECT</td>
80                 <td id='mselectbind' class="red">MULTI</td>
81                 <td id='checkboxbind' class="red">CHECKBOX</td>
82                 <td id='radiobind' class="red">RADIO</td>
83                 <td id='filebind' class="red">FILE</td>
84                 <td id='textbind' class="red">TEXT</td>
85                 <td id='textareabind' class="red">TEXTAREA</td>
86             </tr>
87             <tr>
88                 <td>Focusin:</td>
89                 <td id='selectfocus' class="red">SELECT</td>
90                 <td id='mselectfocus' class="red">MULTI</td>
91                 <td id='checkboxfocus' class="red">CHECKBOX</td>
92                 <td id='radiofocus' class="red">RADIO</td>
93                 <td id='filefocus' class="red">FILE</td>
94                 <td id='textfocus' class="red">TEXT</td>
95                 <td id='textareafocus' class="red">TEXTAREA</td>
96                 <td id='boundFocus' class="red">DOCUMENT</td>
97             </tr>
98             <tr>
99                 <td>Focusout:</td>
100                 <td id='selectblur' class="red">SELECT</td>
101                 <td id='mselectblur' class="red">MULTI</td>
102                 <td id='checkboxblur' class="red">CHECKBOX</td>
103                 <td id='radioblur' class="red">RADIO</td>
104                 <td id='fileblur' class="red">FILE</td>
105                 <td id='textblur' class="red">TEXT</td>
106                 <td id='textareablur' class="red">TEXTAREA</td>
107                 <td id='boundBlur' class="red">DOCUMENT</td>
108             </tr>
109             <tr>
110                 <td>Live Focus:</td>
111                 <td id='selectlfocus' class="red">SELECT</td>
112                 <td id='mselectlfocus' class="red">MULTI</td>
113                 <td id='checkboxlfocus' class="red">CHECKBOX</td>
114                 <td id='radiolfocus' class="red">RADIO</td>
115                 <td id='filelfocus' class="red">FILE</td>
116                 <td id='textlfocus' class="red">TEXT</td>
117                 <td id='textarealfocus' class="red">TEXTAREA</td>
118             </tr>
119             <tr>
120                 <td>Live Blur:</td>
121                 <td id='selectlblur' class="red">SELECT</td>
122                 <td id='mselectlblur' class="red">MULTI</td>
123                 <td id='checkboxlblur' class="red">CHECKBOX</td>
124                 <td id='radiolblur' class="red">RADIO</td>
125                 <td id='filelblur' class="red">FILE</td>
126                 <td id='textlblur' class="red">TEXT</td>
127                 <td id='textarealblur' class="red">TEXTAREA</td>
128             </tr>
129         </table>
130         <h2>Submit Tests</h2>
131         <table>
132         <tr>
133             <td>
134                 Submit each:
135             </td>
136             <td>
137                 <form action="" id="text_submit">
138                 <input class='test' type='text' value='Key Return To Submit'/>
139                 </form>
140             </td>
141             <td>
142                 <form action="" id="password_submit">
143                 <input class='test' type='password' value=''/>
144                 </form>
145             </td>
146             <td>
147                 <form action="" id="submit_submit">
148                 <input type='submit' value="Click Me To Submit" />
149                 </form>
150             </td>
151             <td>$(document).bind('submit')</td>
152         </tr>
153         <tr>
154                 <td>Results:</td>
155                 <td id='textSubmit' class="red">TEXT</td>
156                 <td id='passwordSubmit' class="red">PASSWORD</td>
157                 <td id='submitSubmit' class="red">BUTTON</td>
158                 <td id='boundSubmit' class="red">DOCUMENT</td>
159         </tr>
160         </table>
161
162         <ul id="log"></ul>
163
164         <script type='text/javascript'>
165         jQuery.fn.addChangeTest = function( id, prevent ) {
166                 this.bind("focusin", function(){
167                         jQuery(id + "focus").blink();
168                 }).bind("focusout", function(){
169                         jQuery(id + "blur").blink();
170                 });
171
172                 this.bind("focus", function(){
173                         jQuery(id + "lfocus").blink();
174                 }).bind("blur", function(){
175                         jQuery(id + "lblur").blink();
176                 });
177
178                 return this.bind("change", function(e){
179                         jQuery(id + "bind").blink();
180                 }).live("change", function(e){
181                         if ( prevent ) {
182                                 e.preventDefault();
183                         }
184
185                         jQuery(id).blink();
186                 });
187         };
188
189         jQuery.fn.addSubmitTest = function( id, prevent ) {
190                 return this.live("submit", function(e){
191                         if ( prevent ) {
192                                 e.preventDefault();
193                         }
194
195                         jQuery(id).blink();
196                 });
197         };
198
199         jQuery.fn.blink = function(){
200                 return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
201                         jQuery(this).css("backgroundColor","");
202                         next();
203                 });
204         };
205
206         $(document).bind("focusin", function() {
207                 jQuery("#boundFocus").blink();
208         });
209
210         $(document).bind("focusout", function() {
211                 jQuery("#boundBlur").blink();
212         });
213
214         $("td.red").live("hover", function(e) {
215                 if ( e.type === "mouseenter" ) {
216                         $(this).css("backgroundColor","green");
217                 } else {
218                         $(this).css("backgroundColor","");
219                 }
220         });
221
222         $(".select_test").addChangeTest("#select");
223         $(".mselect_test").addChangeTest("#mselect");
224         $(".checkbox_test").addChangeTest("#checkbox");
225         $(".radio_test").addChangeTest("#radio");
226         $(".file_test").addChangeTest("#file");
227         $('textarea').addChangeTest("#textarea");
228         $('#input').addChangeTest("#text");
229         $(document).bind("change", function(){
230                 jQuery("#boundChange").blink();
231         });
232
233         $("#text_submit").addSubmitTest("#textSubmit", true);
234         $("#password_submit").addSubmitTest("#passwordSubmit", true);
235         $("#submit_submit").addSubmitTest("#submitSubmit", true);
236         $(document).bind("submit", function(){
237                 jQuery("#boundSubmit").blink();
238         });
239
240         </script>
241     </body>
242 </html>