Oops, that test file for bug #8316 was needed - was also missing an include and was...
[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><br />
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                                         <button class="button_test" name="mybutton1" id="button1">Button</button><br />
47                                         <button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br />
48                                         <button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br />
49                                         <button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br />
50                                 </td>
51                                 <td>
52                                         <input type="radio" class="radio_test" name="myradio" id="radio1"/>
53                                         <label for="radio1">Radio1</label><br/>
54                                         <input type="radio" class="radio_test" name="myradio" id="radio2"/>
55                                         <label for="radio2">Radio2</label><br />
56                                         <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
57                                         <label for="radio3">Radio3</label>
58                                 </td>
59                                 <td>
60                                         <input class="file_test" id="file1" type="file"/>
61                                         <td>
62                                                 <input class='test' value='' id='input' size='10' />
63                                                 <input class='test' value='test' id='input2' size='10' readonly="readonly" />
64                                         </td>
65                                         <td>
66                                                 <textarea rows='2'></textarea>
67                                         </td>
68                                 </td>
69                                 <td>$(document).bind('change')<br />
70                                         $(document).bind('click')
71                                 </td>
72                 </tr>
73             <tr>
74                 <td>Live:</td>
75                 <td id='select' class="red">SELECT</td>
76                 <td id='mselect' class="red">MULTI</td>
77                 <td id='checkbox' class="red">CHECKBOX</td>
78                         <td id='button' class="red">BUTTON</td>
79                 <td id='radio' class="red">RADIO</td>
80                 <td id='file' class="red">FILE</td>
81                 <td id='text' class="red">TEXT</td>
82                 <td id='textarea' class="red">TEXTAREA</td>
83                 <td id='boundChange' class="red">DOCUMENT</td>
84             </tr>
85             <tr>
86                 <td>Bind:</td>
87                 <td id='selectbind' class="red">SELECT</td>
88                 <td id='mselectbind' class="red">MULTI</td>
89                 <td id='checkboxbind' class="red">CHECKBOX</td>
90                         <td id='buttonbind' class="red">BUTTON</td>
91                 <td id='radiobind' class="red">RADIO</td>
92                 <td id='filebind' class="red">FILE</td>
93                 <td id='textbind' class="red">TEXT</td>
94                 <td id='textareabind' class="red">TEXTAREA</td>
95             </tr>
96             <tr>
97                 <td>Focusin:</td>
98                 <td id='selectfocus' class="red">SELECT</td>
99                 <td id='mselectfocus' class="red">MULTI</td>
100                 <td id='checkboxfocus' class="red">CHECKBOX</td>
101                         <td id='buttonfocus' class="red">BUTTON</td>
102                 <td id='radiofocus' class="red">RADIO</td>
103                 <td id='filefocus' class="red">FILE</td>
104                 <td id='textfocus' class="red">TEXT</td>
105                 <td id='textareafocus' class="red">TEXTAREA</td>
106                 <td id='boundFocus' class="red">DOCUMENT</td>
107             </tr>
108             <tr>
109                 <td>Focusout:</td>
110                 <td id='selectblur' class="red">SELECT</td>
111                 <td id='mselectblur' class="red">MULTI</td>
112                 <td id='checkboxblur' class="red">CHECKBOX</td>
113                         <td id='buttonblur' class="red">BUTTON</td>
114                 <td id='radioblur' class="red">RADIO</td>
115                 <td id='fileblur' class="red">FILE</td>
116                 <td id='textblur' class="red">TEXT</td>
117                 <td id='textareablur' class="red">TEXTAREA</td>
118                 <td id='boundBlur' class="red">DOCUMENT</td>
119             </tr>
120             <tr>
121                 <td>Live Focus:</td>
122                 <td id='selectlfocus' class="red">SELECT</td>
123                 <td id='mselectlfocus' class="red">MULTI</td>
124                 <td id='checkboxlfocus' class="red">CHECKBOX</td>
125                         <td id='buttonlfocus' class="red">BUTTON</td>
126                 <td id='radiolfocus' class="red">RADIO</td>
127                 <td id='filelfocus' class="red">FILE</td>
128                 <td id='textlfocus' class="red">TEXT</td>
129                 <td id='textarealfocus' class="red">TEXTAREA</td>
130             </tr>
131             <tr>
132                 <td>Live Blur:</td>
133                 <td id='selectlblur' class="red">SELECT</td>
134                 <td id='mselectlblur' class="red">MULTI</td>
135                 <td id='checkboxlblur' class="red">CHECKBOX</td>
136                         <td id='buttonlblur' class="red">BUTTON</td>
137                 <td id='radiolblur' class="red">RADIO</td>
138                 <td id='filelblur' class="red">FILE</td>
139                 <td id='textlblur' class="red">TEXT</td>
140                 <td id='textarealblur' class="red">TEXTAREA</td>
141             </tr>
142             <tr>
143                 <td>Live Click:</td>
144                 <td id='selectlclick' class="red">SELECT</td>
145                 <td id='mselectlclick' class="red">MULTI</td>
146                 <td id='checkboxlclick' class="red">CHECKBOX</td>
147                         <td id='buttonlclick' class="red">BUTTON</td>
148                 <td id='radiolclick' class="red">RADIO</td>
149                 <td id='filelclick' class="red">FILE</td>
150                 <td id='textlclick' class="red">TEXT</td>
151                 <td id='textarealclick' class="red">TEXTAREA</td>
152                         <td id='boundClick' class="red">DOCUMENT</td>
153             </tr>
154         </table>
155         <h2>Submit Tests</h2>
156         <table>
157         <tr>
158             <td>
159                 Submit each:
160             </td>
161             <td>
162                 <form action="" id="text_submit">
163                 <input class='test' type='text' value='Key Return To Submit'/>
164                 </form>
165             </td>
166             <td>
167                 <form action="" id="password_submit">
168                 <input class='test' type='password' value=''/>
169                 </form>
170             </td>
171             <td>
172                 <form action="" id="submit_submit">
173                 <input type='submit' value="Click Me To Submit" />
174                 </form>
175             </td>
176             <td>$(document).bind('submit')</td>
177         </tr>
178         <tr>
179                 <td>Results:</td>
180                 <td id='textSubmit' class="red">TEXT</td>
181                 <td id='passwordSubmit' class="red">PASSWORD</td>
182                 <td id='submitSubmit' class="red">BUTTON</td>
183                 <td id='boundSubmit' class="red">DOCUMENT</td>
184         </tr>
185         </table>
186
187         <ul id="log"></ul>
188
189         <script type='text/javascript'>
190         jQuery.fn.addChangeClickTest = function( id, prevent ) {
191                 this.bind("focusin", function(){
192                         jQuery(id + "focus").blink();
193                 }).bind("focusout", function(){
194                         jQuery(id + "blur").blink();
195                 });
196
197                 this.bind("focus", function(){
198                         jQuery(id + "lfocus").blink();
199                 }).bind("blur", function(){
200                         jQuery(id + "lblur").blink();
201                 });
202
203                 return this.bind("change", function(e){
204                         jQuery(id + "bind").blink();
205                 }).live("change", function(e){
206                         if ( prevent ) {
207                                 e.preventDefault();
208                         }
209
210                         jQuery(id).blink();
211                 }).live("click", function(e){
212                         jQuery(id + "lclick").blink();
213         });
214         };
215
216
217         jQuery.fn.addSubmitTest = function( id, prevent ) {
218                 return this.live("submit", function(e){
219                         if ( prevent ) {
220                                 e.preventDefault();
221                         }
222
223                         jQuery(id).blink();
224                 });
225         };
226
227         jQuery.fn.blink = function(){
228                 return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
229                         jQuery(this).css("backgroundColor","");
230                         next();
231                 });
232         };
233
234         $(document).bind("focusin", function() {
235                 jQuery("#boundFocus").blink();
236         });
237
238         $(document).bind("focusout", function() {
239                 jQuery("#boundBlur").blink();
240         });
241         
242         $(document).bind("click", function() {
243                 jQuery("#boundClick").blink();
244         });
245
246         $("td.red").live("hover", function(e) {
247                 if ( e.type === "mouseenter" ) {
248                         $(this).css("backgroundColor","green");
249                 } else {
250                         $(this).css("backgroundColor","");
251                 }
252         });
253
254         $(".select_test").addChangeClickTest("#select");
255         $(".mselect_test").addChangeClickTest("#mselect");
256         $(".checkbox_test").addChangeClickTest("#checkbox");
257         $(".radio_test").addChangeClickTest("#radio");
258         $(".file_test").addChangeClickTest("#file");
259         $('textarea').addChangeClickTest("#textarea");
260         $('#input').addChangeClickTest("#text");
261         $('button').addChangeClickTest("#button");
262         $(document).bind("change", function(){
263                 jQuery("#boundChange").blink();
264         });
265
266         $("#text_submit").addSubmitTest("#textSubmit", true);
267         $("#password_submit").addSubmitTest("#passwordSubmit", true);
268         $("#submit_submit").addSubmitTest("#submitSubmit", true);
269         $(document).bind("submit", function(){
270                 jQuery("#boundSubmit").blink();
271         });
272
273         </script>
274     </body>
275 </html>