| <html> |
| <head> |
| <script src='../dist/jquery.js' type='text/javascript'></script> |
| <style> |
| .red { |
| background-color: red; |
| border: solid 3px red; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Change Tests</h2> |
| <table> |
| <tr> |
| <td> |
| Change each: |
| </td> |
| <td> |
| <select class='select_test'> |
| <option value='one'>change me 1</option> |
| <option value='two'>change me 2</option> |
| <option value='three'>change me 3</option> |
| </select> |
| <select class='select_test'> |
| <option value='one'>change me 1</option> |
| <option value='two' selected="selected">change me 2</option> |
| <option value='three'>change me 3</option> |
| </select> |
| </td> |
| <td> |
| <select class='mselect_test' multiple="multiple"> |
| <option value='one'>change me 1</option> |
| <option value='two'>change me 2</option> |
| <option value='three'>change me 3</option> |
| </select> |
| </td> |
| <td> |
| <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/> |
| <label for="checkbox1">Checkbox 1</label><br/> |
| <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/> |
| <label for="checkbox2">Checkbox 2</label><br /> |
| <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/> |
| <label for="checkbox3">Checkbox 3</label> |
| </td> |
| <td> |
| <button class="button_test" name="mybutton1" id="button1">Button</button><br /> |
| <button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br /> |
| <button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br /> |
| <button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br /> |
| </td> |
| <td> |
| <input type="radio" class="radio_test" name="myradio" id="radio1"/> |
| <label for="radio1">Radio1</label><br/> |
| <input type="radio" class="radio_test" name="myradio" id="radio2"/> |
| <label for="radio2">Radio2</label><br /> |
| <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/> |
| <label for="radio3">Radio3</label> |
| </td> |
| <td> |
| <input class="file_test" id="file1" type="file"/> |
| <td> |
| <input class='test' value='' id='input' size='10' /> |
| <input class='test' value='test' id='input2' size='10' readonly="readonly" /> |
| </td> |
| <td> |
| <textarea rows='2'></textarea> |
| </td> |
| </td> |
| <td>$(document).bind('change')<br /> |
| $(document).bind('click') |
| </td> |
| </tr> |
| <tr> |
| <td>Live:</td> |
| <td id='select' class="red">SELECT</td> |
| <td id='mselect' class="red">MULTI</td> |
| <td id='checkbox' class="red">CHECKBOX</td> |
| <td id='button' class="red">BUTTON</td> |
| <td id='radio' class="red">RADIO</td> |
| <td id='file' class="red">FILE</td> |
| <td id='text' class="red">TEXT</td> |
| <td id='textarea' class="red">TEXTAREA</td> |
| <td id='boundChange' class="red">DOCUMENT</td> |
| </tr> |
| <tr> |
| <td>Bind:</td> |
| <td id='selectbind' class="red">SELECT</td> |
| <td id='mselectbind' class="red">MULTI</td> |
| <td id='checkboxbind' class="red">CHECKBOX</td> |
| <td id='buttonbind' class="red">BUTTON</td> |
| <td id='radiobind' class="red">RADIO</td> |
| <td id='filebind' class="red">FILE</td> |
| <td id='textbind' class="red">TEXT</td> |
| <td id='textareabind' class="red">TEXTAREA</td> |
| </tr> |
| <tr> |
| <td>Focusin:</td> |
| <td id='selectfocus' class="red">SELECT</td> |
| <td id='mselectfocus' class="red">MULTI</td> |
| <td id='checkboxfocus' class="red">CHECKBOX</td> |
| <td id='buttonfocus' class="red">BUTTON</td> |
| <td id='radiofocus' class="red">RADIO</td> |
| <td id='filefocus' class="red">FILE</td> |
| <td id='textfocus' class="red">TEXT</td> |
| <td id='textareafocus' class="red">TEXTAREA</td> |
| <td id='boundFocus' class="red">DOCUMENT</td> |
| </tr> |
| <tr> |
| <td>Focusout:</td> |
| <td id='selectblur' class="red">SELECT</td> |
| <td id='mselectblur' class="red">MULTI</td> |
| <td id='checkboxblur' class="red">CHECKBOX</td> |
| <td id='buttonblur' class="red">BUTTON</td> |
| <td id='radioblur' class="red">RADIO</td> |
| <td id='fileblur' class="red">FILE</td> |
| <td id='textblur' class="red">TEXT</td> |
| <td id='textareablur' class="red">TEXTAREA</td> |
| <td id='boundBlur' class="red">DOCUMENT</td> |
| </tr> |
| <tr> |
| <td>Live Focus:</td> |
| <td id='selectlfocus' class="red">SELECT</td> |
| <td id='mselectlfocus' class="red">MULTI</td> |
| <td id='checkboxlfocus' class="red">CHECKBOX</td> |
| <td id='buttonlfocus' class="red">BUTTON</td> |
| <td id='radiolfocus' class="red">RADIO</td> |
| <td id='filelfocus' class="red">FILE</td> |
| <td id='textlfocus' class="red">TEXT</td> |
| <td id='textarealfocus' class="red">TEXTAREA</td> |
| </tr> |
| <tr> |
| <td>Live Blur:</td> |
| <td id='selectlblur' class="red">SELECT</td> |
| <td id='mselectlblur' class="red">MULTI</td> |
| <td id='checkboxlblur' class="red">CHECKBOX</td> |
| <td id='buttonlblur' class="red">BUTTON</td> |
| <td id='radiolblur' class="red">RADIO</td> |
| <td id='filelblur' class="red">FILE</td> |
| <td id='textlblur' class="red">TEXT</td> |
| <td id='textarealblur' class="red">TEXTAREA</td> |
| </tr> |
| <tr> |
| <td>Live Click:</td> |
| <td id='selectlclick' class="red">SELECT</td> |
| <td id='mselectlclick' class="red">MULTI</td> |
| <td id='checkboxlclick' class="red">CHECKBOX</td> |
| <td id='buttonlclick' class="red">BUTTON</td> |
| <td id='radiolclick' class="red">RADIO</td> |
| <td id='filelclick' class="red">FILE</td> |
| <td id='textlclick' class="red">TEXT</td> |
| <td id='textarealclick' class="red">TEXTAREA</td> |
| <td id='boundClick' class="red">DOCUMENT</td> |
| </tr> |
| </table> |
| <h2>Submit Tests</h2> |
| <table> |
| <tr> |
| <td> |
| Submit each: |
| </td> |
| <td> |
| <form action="" id="text_submit"> |
| <input class='test' type='text' value='Key Return To Submit'/> |
| </form> |
| </td> |
| <td> |
| <form action="" id="password_submit"> |
| <input class='test' type='password' value=''/> |
| </form> |
| </td> |
| <td> |
| <form action="" id="submit_submit"> |
| <input type='submit' value="Click Me To Submit" /> |
| </form> |
| </td> |
| <td>$(document).bind('submit')</td> |
| </tr> |
| <tr> |
| <td>Results:</td> |
| <td id='textSubmit' class="red">TEXT</td> |
| <td id='passwordSubmit' class="red">PASSWORD</td> |
| <td id='submitSubmit' class="red">BUTTON</td> |
| <td id='boundSubmit' class="red">DOCUMENT</td> |
| </tr> |
| </table> |
| |
| <ul id="log"></ul> |
| |
| <script type='text/javascript'> |
| jQuery.fn.addChangeClickTest = function( id, prevent ) { |
| this.bind("focusin", function(){ |
| jQuery(id + "focus").blink(); |
| }).bind("focusout", function(){ |
| jQuery(id + "blur").blink(); |
| }); |
| |
| this.bind("focus", function(){ |
| jQuery(id + "lfocus").blink(); |
| }).bind("blur", function(){ |
| jQuery(id + "lblur").blink(); |
| }); |
| |
| return this.bind("change", function(e){ |
| jQuery(id + "bind").blink(); |
| }).live("change", function(e){ |
| if ( prevent ) { |
| e.preventDefault(); |
| } |
| |
| jQuery(id).blink(); |
| }).live("click", function(e){ |
| jQuery(id + "lclick").blink(); |
| }); |
| }; |
| |
| |
| jQuery.fn.addSubmitTest = function( id, prevent ) { |
| return this.live("submit", function(e){ |
| if ( prevent ) { |
| e.preventDefault(); |
| } |
| |
| jQuery(id).blink(); |
| }); |
| }; |
| |
| jQuery.fn.blink = function(){ |
| return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){ |
| jQuery(this).css("backgroundColor",""); |
| next(); |
| }); |
| }; |
| |
| $(document).bind("focusin", function() { |
| jQuery("#boundFocus").blink(); |
| }); |
| |
| $(document).bind("focusout", function() { |
| jQuery("#boundBlur").blink(); |
| }); |
| |
| $(document).bind("click", function() { |
| jQuery("#boundClick").blink(); |
| }); |
| |
| $("td.red").live("hover", function(e) { |
| if ( e.type === "mouseenter" ) { |
| $(this).css("backgroundColor","green"); |
| } else { |
| $(this).css("backgroundColor",""); |
| } |
| }); |
| |
| $(".select_test").addChangeClickTest("#select"); |
| $(".mselect_test").addChangeClickTest("#mselect"); |
| $(".checkbox_test").addChangeClickTest("#checkbox"); |
| $(".radio_test").addChangeClickTest("#radio"); |
| $(".file_test").addChangeClickTest("#file"); |
| $('textarea').addChangeClickTest("#textarea"); |
| $('#input').addChangeClickTest("#text"); |
| $('button').addChangeClickTest("#button"); |
| $(document).bind("change", function(){ |
| jQuery("#boundChange").blink(); |
| }); |
| |
| $("#text_submit").addSubmitTest("#textSubmit", true); |
| $("#password_submit").addSubmitTest("#passwordSubmit", true); |
| $("#submit_submit").addSubmitTest("#submitSubmit", true); |
| $(document).bind("submit", function(){ |
| jQuery("#boundSubmit").blink(); |
| }); |
| |
| </script> |
| </body> |
| </html> |
