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