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