-<html>\r
- <head>\r
- <script src='../dist/jquery.js' type='text/javascript'></script>\r
- <style>\r
- .red {\r
- background-color: red;\r
- border: solid 3px red;\r
- }\r
- </style>\r
- </head>\r
- <body>\r
- <h2>Change Tests</h2>\r
- <table>\r
- <tr>\r
- <td>\r
- Change each:\r
- </td>\r
- <td>\r
- <select class='select_test'>\r
- <option value='one'>change me 1</option>\r
- <option value='two'>change me 2</option>\r
- <option value='three'>change me 3</option>\r
- </select>\r
- </td>\r
- <td>\r
- <select class='mselect_test' multiple="multiple">\r
- <option value='one'>change me 1</option>\r
- <option value='two'>change me 2</option>\r
- <option value='three'>change me 3</option>\r
- </select>\r
- </td>\r
- <td>\r
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>\r
- <label for="checkbox1">Checkbox 1 label</label><br/>\r
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>\r
- <label for="checkbox2">Checkbox 2 label</label>\r
- </td>\r
- <td>\r
- <input type="radio" class="radio_test" name="myradio" id="radio1"/>\r
- <label for="radio1">Radio 1 label</label><br/>\r
- <input type="radio" class="radio_test" name="myradio" id="radio2"/>\r
- <label for="radio2">Radio 2 label</label>\r
- </td>\r
- <td>\r
- <input class='test' value='' id='input' size='10' />\r
- </td>\r
- <td>\r
- <textarea rows='2'></textarea>\r
- </td>\r
- <td>$().bind('change')</td>\r
- </tr>\r
- <tr>\r
- <td>Results:</td>\r
- <td id='select' class="red">SELECT</td>\r
- <td id='mselect' class="red">MULTI</td>\r
- <td id='checkbox' class="red">CHECKBOX</td>\r
- <td id='radio' class="red">RADIO</td>\r
- <td id='text' class="red">TEXT</td>\r
- <td id='textarea' class="red">TEXTAREA</td>\r
- <td id='boundChange' class="red">DOCUMENT</td>\r
- </tr>\r
- </table>\r
- <h2>Submit Tests</h2>\r
- <table>\r
- <tr>\r
- <td>\r
- Submit each:\r
- </td>\r
- <td>\r
- <form action="" id="text_submit">\r
- <input class='test' type='text' value='Key Return To Submit'/>\r
- </form>\r
- </td>\r
- <td>\r
- <form action="" id="password_submit">\r
- <input class='test' type='password' value=''/>\r
- </form>\r
- </td>\r
- <td>\r
- <form action="" id="submit_submit">\r
- <input type='submit' value="Click Me To Submit" />\r
- </form>\r
- </td>\r
- <td>$().bind('submit')</td>\r
- </tr>\r
- <tr>\r
- <td>Results:</td>\r
- <td id='textSubmit' class="red">TEXT</td>\r
- <td id='passwordSubmit' class="red">PASSWORD</td>\r
- <td id='submitSubmit' class="red">BUTTON</td>\r
- <td id='boundSubmit' class="red">DOCUMENT</td>\r
- </tr>\r
- </table>\r
- \r
-\r
- <script type='text/javascript'>\r
- makeChangeFunc = function(id, prevent){\r
- return function(e){\r
- if(prevent)\r
- e.preventDefault();\r
- $(id).css("backgroundColor","green").css("border","solid 3px green");\r
- setTimeout(function(){\r
- $(id).css("backgroundColor","");\r
- }, 700)\r
- }\r
- }\r
- \r
- $(".select_test").live("change",makeChangeFunc("#select"))\r
- $(".mselect_test").live("change",makeChangeFunc("#mselect"))\r
- $(".checkbox_test").live("change",makeChangeFunc("#checkbox"))\r
- $(".radio_test").live("change",makeChangeFunc("#radio"))\r
- $('textarea').live('change', makeChangeFunc("#textarea"))\r
- $('#input').live('change', makeChangeFunc("#text"))\r
- $(document).bind('change', makeChangeFunc("#boundChange"))\r
- \r
- $("#text_submit").live("submit", makeChangeFunc("#textSubmit", true) )\r
- $("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) )\r
- $("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) )\r
- $(document).bind('submit', makeChangeFunc("#boundSubmit"))\r
- \r
- </script>\r
- </body>\r
-</html>\r
+<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>
+ <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
+ <label for="checkbox3">Checkbox 3</label>
+ </td>
+ </td>
+ </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>
+ <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>$(document).bind('change')</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='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='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='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='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='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='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>
+ </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.addChangeTest = 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();
+ });
+ };
+
+ 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();
+ });
+
+ $("td.red").live("hover", function(e) {
+ if ( e.type === "mouseenter" ) {
+ $(this).css("backgroundColor","green");
+ } else {
+ $(this).css("backgroundColor","");
+ }
+ });
+
+ $(".select_test").addChangeTest("#select");
+ $(".mselect_test").addChangeTest("#mselect");
+ $(".checkbox_test").addChangeTest("#checkbox");
+ $(".radio_test").addChangeTest("#radio");
+ $(".file_test").addChangeTest("#file");
+ $('textarea').addChangeTest("#textarea");
+ $('#input').addChangeTest("#text");
+ $(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>
git.asbjorn.biz / jquery.git / blobdiff