test/delegatetest.html

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