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='test' value='' id='input' size='10' />\r
  57                 <input class='test' value='test' id='input2' size='10' readonly="readonly" />\r
  58                 </td>\r
  59                 <td>\r
  60                 <textarea rows='2'></textarea>\r
  61                 </td>\r
  62                 <td>$(document).bind('change')</td>\r
  63             </tr>\r
  64             <tr>\r
  65                 <td>Live:</td>\r
  66                 <td id='select' class="red">SELECT</td>\r
  67                 <td id='mselect' class="red">MULTI</td>\r
  68                 <td id='checkbox' class="red">CHECKBOX</td>\r
  69                 <td id='radio' class="red">RADIO</td>\r
  70                 <td id='text' class="red">TEXT</td>\r
  71                 <td id='textarea' class="red">TEXTAREA</td>\r
  72                 <td id='boundChange' class="red">DOCUMENT</td>\r
  73             </tr>\r
  74             <tr>\r
  75                 <td>Bind:</td>\r
  76                 <td id='selectbind' class="red">SELECT</td>\r
  77                 <td id='mselectbind' class="red">MULTI</td>\r
  78                 <td id='checkboxbind' class="red">CHECKBOX</td>\r
  79                 <td id='radiobind' class="red">RADIO</td>\r
  80                 <td id='textbind' class="red">TEXT</td>\r
  81                 <td id='textareabind' class="red">TEXTAREA</td>\r
  82             </tr>\r
  83             <tr>\r
  84                 <td>Focusin:</td>\r
  85                 <td id='selectfocus' class="red">SELECT</td>\r
  86                 <td id='mselectfocus' class="red">MULTI</td>\r
  87                 <td id='checkboxfocus' class="red">CHECKBOX</td>\r
  88                 <td id='radiofocus' class="red">RADIO</td>\r
  89                 <td id='textfocus' class="red">TEXT</td>\r
  90                 <td id='textareafocus' class="red">TEXTAREA</td>\r
  91                 <td id='boundFocus' class="red">DOCUMENT</td>\r
  92             </tr>\r
  93             <tr>\r
  94                 <td>Focusout:</td>\r
  95                 <td id='selectblur' class="red">SELECT</td>\r
  96                 <td id='mselectblur' class="red">MULTI</td>\r
  97                 <td id='checkboxblur' class="red">CHECKBOX</td>\r
  98                 <td id='radioblur' class="red">RADIO</td>\r
  99                 <td id='textblur' class="red">TEXT</td>\r
 100                 <td id='textareablur' class="red">TEXTAREA</td>\r
 101                 <td id='boundBlur' class="red">DOCUMENT</td>\r
 102             </tr>\r
 103             <tr>\r
 104                 <td>Live Focus:</td>\r
 105                 <td id='selectlfocus' class="red">SELECT</td>\r
 106                 <td id='mselectlfocus' class="red">MULTI</td>\r
 107                 <td id='checkboxlfocus' class="red">CHECKBOX</td>\r
 108                 <td id='radiolfocus' class="red">RADIO</td>\r
 109                 <td id='textlfocus' class="red">TEXT</td>\r
 110                 <td id='textarealfocus' class="red">TEXTAREA</td>\r
 111             </tr>\r
 112             <tr>\r
 113                 <td>Live Blur:</td>\r
 114                 <td id='selectlblur' class="red">SELECT</td>\r
 115                 <td id='mselectlblur' class="red">MULTI</td>\r
 116                 <td id='checkboxlblur' class="red">CHECKBOX</td>\r
 117                 <td id='radiolblur' class="red">RADIO</td>\r
 118                 <td id='textlblur' class="red">TEXT</td>\r
 119                 <td id='textarealblur' class="red">TEXTAREA</td>\r
 120             </tr>\r
 121         </table>\r
 122         <h2>Submit Tests</h2>\r
 123         <table>\r
 124         <tr>\r
 125             <td>\r
 126                 Submit each:\r
 127             </td>\r
 128             <td>\r
 129                 <form action="" id="text_submit">\r
 130                 <input class='test' type='text' value='Key Return To Submit'/>\r
 131                 </form>\r
 132             </td>\r
 133             <td>\r
 134                 <form action="" id="password_submit">\r
 135                 <input class='test' type='password' value=''/>\r
 136                 </form>\r
 137             </td>\r
 138             <td>\r
 139                 <form action="" id="submit_submit">\r
 140                 <input type='submit' value="Click Me To Submit" />\r
 141                 </form>\r
 142             </td>\r
 143             <td>$(document).bind('submit')</td>\r
 144         </tr>\r
 145         <tr>\r
 146                 <td>Results:</td>\r
 147                 <td id='textSubmit' class="red">TEXT</td>\r
 148                 <td id='passwordSubmit' class="red">PASSWORD</td>\r
 149                 <td id='submitSubmit' class="red">BUTTON</td>\r
 150                 <td id='boundSubmit' class="red">DOCUMENT</td>\r
 151         </tr>\r
 152         </table>\r
 153 \r
 154         <ul id="log"></ul>\r
 155 \r
 156         <script type='text/javascript'>\r
 157         jQuery.fn.addChangeTest = function( id, prevent ) {\r
 158                 this.bind("focusin", function(){\r
 159                         jQuery(id + "focus").blink();\r
 160                 }).bind("focusout", function(){\r
 161                         jQuery(id + "blur").blink();\r
 162                 });\r
 163 \r
 164                 this.bind("focus", function(){\r
 165                         jQuery(id + "lfocus").blink();\r
 166                 }).bind("blur", function(){\r
 167                         jQuery(id + "lblur").blink();\r
 168                 });\r
 169 \r
 170                 return this.bind("change", function(e){\r
 171                         jQuery(id + "bind").blink();\r
 172                 }).live("change", function(e){\r
 173                         if ( prevent ) {\r
 174                                 e.preventDefault();\r
 175                         }\r
 176 \r
 177                         jQuery(id).blink();\r
 178                 });\r
 179         };\r
 180 \r
 181         jQuery.fn.addSubmitTest = function( id, prevent ) {\r
 182                 return this.live("submit", function(e){\r
 183                         if ( prevent ) {\r
 184                                 e.preventDefault();\r
 185                         }\r
 186 \r
 187                         jQuery(id).blink();\r
 188                 });\r
 189         };\r
 190 \r
 191         jQuery.fn.blink = function(){\r
 192                 return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){\r
 193                         jQuery(this).css("backgroundColor","");\r
 194                         next();\r
 195                 });\r
 196         };\r
 197 \r
 198         $(document).bind("focusin", function() {\r
 199                 jQuery("#boundFocus").blink();\r
 200         });\r
 201         \r
 202         $(document).bind("focusout", function() {\r
 203                 jQuery("#boundBlur").blink();\r
 204         });\r
 205 \r
 206         $("td.red").live("hover", function(e) {\r
 207                 if ( e.type === "mouseenter" ) {\r
 208                         $(this).css("backgroundColor","green");\r
 209                 } else {\r
 210                         $(this).css("backgroundColor","");\r
 211                 }\r
 212         });\r
 213 \r
 214         $(".select_test").addChangeTest("#select");\r
 215         $(".mselect_test").addChangeTest("#mselect");\r
 216         $(".checkbox_test").addChangeTest("#checkbox");\r
 217         $(".radio_test").addChangeTest("#radio");\r
 218         $('textarea').addChangeTest("#textarea");\r
 219         $('#input').addChangeTest("#text");\r
 220         $(document).bind("change", function(){\r
 221                 jQuery("#boundChange").blink();\r
 222         });\r
 223         \r
 224         $("#text_submit").addSubmitTest("#textSubmit", true);\r
 225         $("#password_submit").addSubmitTest("#passwordSubmit", true);\r
 226         $("#submit_submit").addSubmitTest("#submitSubmit", true);\r
 227         $(document).bind("submit", function(){\r
 228                 jQuery("#boundSubmit").blink();\r
 229         });\r
 230         \r
 231         </script>\r
 232     </body>\r
 233 </html>\r