3 <script src='../dist/jquery.js' type='text/javascript'></script>
\r
6 background-color: red;
\r
7 border: solid 3px red;
\r
12 <h2>Change Tests</h2>
\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
26 <select class='mselect_test' multiple="multiple">
\r
27 <option value='one'>change me 1</option>
\r
28 <option value='two'>change me 2</option>
\r
29 <option value='three'>change me 3</option>
\r
33 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
\r
34 <label for="checkbox1">Checkbox 1</label><br/>
\r
35 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
\r
36 <label for="checkbox2">Checkbox 2</label>
\r
37 <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
\r
38 <label for="checkbox3">Checkbox 3</label>
\r
43 <input type="radio" class="radio_test" name="myradio" id="radio1"/>
\r
44 <label for="radio1">Radio1</label><br/>
\r
45 <input type="radio" class="radio_test" name="myradio" id="radio2"/>
\r
46 <label for="radio2">Radio2</label>
\r
47 <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
\r
48 <label for="radio3">Radio3</label>
\r
51 <input class='test' value='' id='input' size='10' />
\r
52 <input class='test' value='test' id='input2' size='10' readonly="readonly" />
\r
55 <textarea rows='2'></textarea>
\r
57 <td>$(document).bind('change')</td>
\r
61 <td id='select' class="red">SELECT</td>
\r
62 <td id='mselect' class="red">MULTI</td>
\r
63 <td id='checkbox' class="red">CHECKBOX</td>
\r
64 <td id='radio' class="red">RADIO</td>
\r
65 <td id='text' class="red">TEXT</td>
\r
66 <td id='textarea' class="red">TEXTAREA</td>
\r
67 <td id='boundChange' class="red">DOCUMENT</td>
\r
71 <td id='selectbind' class="red">SELECT</td>
\r
72 <td id='mselectbind' class="red">MULTI</td>
\r
73 <td id='checkboxbind' class="red">CHECKBOX</td>
\r
74 <td id='radiobind' class="red">RADIO</td>
\r
75 <td id='textbind' class="red">TEXT</td>
\r
76 <td id='textareabind' class="red">TEXTAREA</td>
\r
80 <td id='selectfocus' class="red">SELECT</td>
\r
81 <td id='mselectfocus' class="red">MULTI</td>
\r
82 <td id='checkboxfocus' class="red">CHECKBOX</td>
\r
83 <td id='radiofocus' class="red">RADIO</td>
\r
84 <td id='textfocus' class="red">TEXT</td>
\r
85 <td id='textareafocus' class="red">TEXTAREA</td>
\r
86 <td id='boundFocus' class="red">DOCUMENT</td>
\r
90 <td id='selectblur' class="red">SELECT</td>
\r
91 <td id='mselectblur' class="red">MULTI</td>
\r
92 <td id='checkboxblur' class="red">CHECKBOX</td>
\r
93 <td id='radioblur' class="red">RADIO</td>
\r
94 <td id='textblur' class="red">TEXT</td>
\r
95 <td id='textareablur' class="red">TEXTAREA</td>
\r
96 <td id='boundBlur' class="red">DOCUMENT</td>
\r
99 <td>Live Focus:</td>
\r
100 <td id='selectlfocus' class="red">SELECT</td>
\r
101 <td id='mselectlfocus' class="red">MULTI</td>
\r
102 <td id='checkboxlfocus' class="red">CHECKBOX</td>
\r
103 <td id='radiolfocus' class="red">RADIO</td>
\r
104 <td id='textlfocus' class="red">TEXT</td>
\r
105 <td id='textarealfocus' class="red">TEXTAREA</td>
\r
108 <td>Live Blur:</td>
\r
109 <td id='selectlblur' class="red">SELECT</td>
\r
110 <td id='mselectlblur' class="red">MULTI</td>
\r
111 <td id='checkboxlblur' class="red">CHECKBOX</td>
\r
112 <td id='radiolblur' class="red">RADIO</td>
\r
113 <td id='textlblur' class="red">TEXT</td>
\r
114 <td id='textarealblur' class="red">TEXTAREA</td>
\r
117 <h2>Submit Tests</h2>
\r
124 <form action="" id="text_submit">
\r
125 <input class='test' type='text' value='Key Return To Submit'/>
\r
129 <form action="" id="password_submit">
\r
130 <input class='test' type='password' value=''/>
\r
134 <form action="" id="submit_submit">
\r
135 <input type='submit' value="Click Me To Submit" />
\r
138 <td>$(document).bind('submit')</td>
\r
142 <td id='textSubmit' class="red">TEXT</td>
\r
143 <td id='passwordSubmit' class="red">PASSWORD</td>
\r
144 <td id='submitSubmit' class="red">BUTTON</td>
\r
145 <td id='boundSubmit' class="red">DOCUMENT</td>
\r
151 <script type='text/javascript'>
\r
152 jQuery.fn.addChangeTest = function( id, prevent ) {
\r
153 this.bind("focusin", function(){
\r
154 jQuery(id + "focus").blink();
\r
155 }).bind("focusout", function(){
\r
156 jQuery(id + "blur").blink();
\r
159 this.bind("focus", function(){
\r
160 jQuery(id + "lfocus").blink();
\r
161 }).bind("blur", function(){
\r
162 jQuery(id + "lblur").blink();
\r
165 return this.bind("change", function(e){
\r
166 jQuery(id + "bind").blink();
\r
167 }).live("change", function(e){
\r
169 e.preventDefault();
\r
172 jQuery(id).blink();
\r
176 jQuery.fn.addSubmitTest = function( id, prevent ) {
\r
177 return this.live("submit", function(e){
\r
179 e.preventDefault();
\r
182 jQuery(id).blink();
\r
186 jQuery.fn.blink = function(){
\r
187 return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
\r
188 jQuery(this).css("backgroundColor","");
\r
193 $(document).bind("focusin", function() {
\r
194 jQuery("#boundFocus").blink();
\r
197 $(document).bind("focusout", function() {
\r
198 jQuery("#boundBlur").blink();
\r
201 $("td.red").live("hover", function(e) {
\r
202 if ( e.type === "mouseenter" ) {
\r
203 $(this).css("backgroundColor","green");
\r
205 $(this).css("backgroundColor","");
\r
209 $(".select_test").addChangeTest("#select");
\r
210 $(".mselect_test").addChangeTest("#mselect");
\r
211 $(".checkbox_test").addChangeTest("#checkbox");
\r
212 $(".radio_test").addChangeTest("#radio");
\r
213 $('textarea').addChangeTest("#textarea");
\r
214 $('#input').addChangeTest("#text");
\r
215 $(document).bind("change", function(){
\r
216 jQuery("#boundChange").blink();
\r
219 $("#text_submit").addSubmitTest("#textSubmit", true);
\r
220 $("#password_submit").addSubmitTest("#passwordSubmit", true);
\r
221 $("#submit_submit").addSubmitTest("#submitSubmit", true);
\r
222 $(document).bind("submit", function(){
\r
223 jQuery("#boundSubmit").blink();
\r