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                     </td>\r
  25                     <td>\r
  26                         <select class='mselect_test' multiple="multiple">\r
  27                             <option value='one'>change me 1</option>\r
  28                             <option value='two'>change me 2</option>\r
  29                             <option value='three'>change me 3</option>\r
  30                         </select>\r
  31                     </td>\r
  32                     <td>\r
  33                         <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>\r
  34                         <label for="checkbox1">Checkbox 1 label</label><br/>\r
  35                         <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>\r
  36                         <label for="checkbox2">Checkbox 2 label</label>\r
  37                     </td>\r
  38                     <td>\r
  39                         <input type="radio" class="radio_test" name="myradio" id="radio1"/>\r
  40                         <label for="radio1">Radio 1 label</label><br/>\r
  41                         <input type="radio" class="radio_test" name="myradio" id="radio2"/>\r
  42                         <label for="radio2">Radio 2 label</label>\r
  43                     </td>\r
  44                     <td>\r
  45                         <input class='test' value='' id='input' size='10' />\r
  46                     </td>\r
  47                     <td>\r
  48                         <textarea rows='2'></textarea>\r
  49                     </td>\r
  50                     <td>$().bind('change')</td>\r
  51                 </tr>\r
  52                 <tr>\r
  53                     <td>Results:</td>\r
  54                     <td id='select' class="red">SELECT</td>\r
  55                     <td id='mselect' class="red">MULTI</td>\r
  56                     <td id='checkbox' class="red">CHECKBOX</td>\r
  57                     <td id='radio' class="red">RADIO</td>\r
  58                     <td id='text' class="red">TEXT</td>\r
  59                     <td id='textarea' class="red">TEXTAREA</td>\r
  60                     <td id='boundChange' class="red">DOCUMENT</td>\r
  61                 </tr>\r
  62         </table>\r
  63         <h2>Submit Tests</h2>\r
  64         <table>\r
  65             <tr>\r
  66                 <td>\r
  67                     Submit each:\r
  68                 </td>\r
  69                 <td>\r
  70                     <form action="" id="text_submit">\r
  71                         <input class='test' type='text' value='Key Return To Submit'/>\r
  72                     </form>\r
  73                 </td>\r
  74                 <td>\r
  75                     <form action="" id="password_submit">\r
  76                         <input class='test' type='password' value=''/>\r
  77                     </form>\r
  78                 </td>\r
  79                 <td>\r
  80                     <form action="" id="submit_submit">\r
  81                         <input type='submit' value="Click Me To Submit" />\r
  82                     </form>\r
  83                 </td>\r
  84                 <td>$().bind('submit')</td>\r
  85             </tr>\r
  86             <tr>\r
  87                     <td>Results:</td>\r
  88                     <td id='textSubmit' class="red">TEXT</td>\r
  89                     <td id='passwordSubmit' class="red">PASSWORD</td>\r
  90                     <td id='submitSubmit' class="red">BUTTON</td>\r
  91                     <td id='boundSubmit' class="red">DOCUMENT</td>\r
  92             </tr>\r
  93         </table>\r
  94         \r
  95 \r
  96         <script type='text/javascript'>\r
  97             makeChangeFunc = function(id, prevent){\r
  98                 return function(e){\r
  99                     if(prevent)\r
 100                         e.preventDefault();\r
 101                     $(id).css("backgroundColor","green").css("border","solid 3px green");\r
 102                     setTimeout(function(){\r
 103                         $(id).css("backgroundColor","");\r
 104                     }, 700)\r
 105                 }\r
 106             }\r
 107             \r
 108             $(".select_test").live("change",makeChangeFunc("#select"))\r
 109             $(".mselect_test").live("change",makeChangeFunc("#mselect"))\r
 110             $(".checkbox_test").live("change",makeChangeFunc("#checkbox"))\r
 111             $(".radio_test").live("change",makeChangeFunc("#radio"))\r
 112             $('textarea').live('change', makeChangeFunc("#textarea"))\r
 113             $('#input').live('change', makeChangeFunc("#text"))\r
 114             $(document).bind('change', makeChangeFunc("#boundChange"))\r
 115             \r
 116             $("#text_submit").live("submit", makeChangeFunc("#textSubmit", true) )\r
 117             $("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) )\r
 118             $("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) )\r
 119             $(document).bind('submit', makeChangeFunc("#boundSubmit"))\r
 120             \r
 121         </script>\r
 122     </body>\r
 123 </html>\r