libs/js/jquery-mobile-1.0.1pre/experiments/scrollview/sv-test-01.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6 <title>Scrollview Test 1 - Form Element Event Test</title>
   7 <link rel="stylesheet"  href="../../css/themes/default/" />
   8 <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
   9 <script src="../../js/jquery.js"></script>
  10 <script src="../../js/"></script>
  11 <style>
  12
  13 #evtCatcher {
  14         border: solid 1px black;
  15         background-color: #FF9;
  16         padding: 10px;
  17 }
  18
  19 </style>
  20 <script>
  21
  22 function getEvtHandler(cb_pd, cb_sp)
  23 {
  24         return function(e) {
  25                 if (cb_pd.checked)
  26                         e.preventDefault();
  27                 if (cb_sp.checked)
  28                         e.stopPropagation();
  29         };
  30 }
  31
  32 $(function(){
  33         $("#evtCatcher")
  34                 .bind("touchstart", getEvtHandler($("#cb_hd_pd")[0], $("#cb_hd_sp")[0]))
  35                 .bind("touchmove",  getEvtHandler($("#cb_hm_pd")[0], $("#cb_hm_sp")[0]))
  36                 .bind("touchstop",  getEvtHandler($("#cb_hu_pd")[0], $("#cb_hu_sp")[0]));
  37 });
  38 </script>
  39 </head>
  40 <body>
  41 <div data-role="page" data-theme="c">
  42   <div data-role="header">
  43     <h1>Form Element Event Test</h1>
  44   </div>
  45   <!-- /header -->
  46
  47   <div data-role="content" data-theme="c">
  48     <p>The form elements on this page are wrapped by a special div that has event handlers for touchstart, touchmove and touchstop. The checkboxes below control how the event within these handlers is treated when they fire. Use this page to figure out how the various event treatments impact the form elements on you mobile device, then add to the notes at the bottom of the page.</p>
  49     <p>All scrolling on this page is performed by the native viewport, there are no scrollviews on this page.</p>
  50     <div  data-role="fieldcontain">
  51       <fieldset data-role="controlgroup">
  52         <input type="checkbox" name="cb_hd_pd" id="cb_hd_pd" />
  53         <label for="cb_hd_pd">touchstart - Prevent Default</label>
  54         <input type="checkbox" name="cb_hd_sp" id="cb_hd_sp" />
  55         <label for="cb_hd_sp">touchstart - Stop Propagation</label>
  56         <input type="checkbox" name="cb_hm_pd" id="cb_hm_pd" />
  57         <label for="cb_hm_pd">touchmove - Prevent Default</label>
  58         <input type="checkbox" name="cb_hm_sp" id="cb_hm_sp" />
  59         <label for="cb_hm_sp">touchmove - Stop Propagation</label>
  60         <input type="checkbox" name="cb_hu_pd" id="cb_hu_pd" />
  61         <label for="cb_hu_pd">touchstop - Prevent Default</label>
  62         <input type="checkbox" name="cb_hu_sp" id="cb_hu_sp" />
  63         <label for="cb_hu_sp">touchstop - Stop Propagation</label>
  64       </fieldset>
  65     </div>
  66     <div id="evtCatcher">
  67       <form action="#" method="get">
  68         <h2>Form elements</h2>
  69         <div data-role="fieldcontain">
  70           <label for="name">Text Input:</label>
  71           <input type="text" name="name" id="name" value=""  />
  72         </div>
  73         <div data-role="fieldcontain">
  74           <label for="textarea">Textarea:</label>
  75           <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  76         </div>
  77         <div data-role="fieldcontain">
  78           <label for="search">Search Input:</label>
  79           <input type="search" name="password" id="search" value=""  />
  80         </div>
  81         <div data-role="fieldcontain">
  82           <label for="slider2">Flip switch:</label>
  83           <select name="slider2" id="slider2" data-role="slider">
  84             <option value="off">Off</option>
  85             <option value="on">On</option>
  86           </select>
  87         </div>
  88         <div data-role="fieldcontain">
  89           <label for="slider">Slider:</label>
  90           <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  91         </div>
  92         <div data-role="fieldcontain">
  93           <fieldset data-role="controlgroup">
  94             <legend>Choose as many snacks as you'd like:</legend>
  95             <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
  96             <label for="checkbox-1a">Cheetos</label>
  97             <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
  98             <label for="checkbox-2a">Doritos</label>
  99             <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
 100             <label for="checkbox-3a">Fritos</label>
 101             <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
 102             <label for="checkbox-4a">Sun Chips</label>
 103           </fieldset>
 104         </div>
 105         <div data-role="fieldcontain">
 106           <fieldset data-role="controlgroup" data-type="horizontal">
 107             <legend>Font styling:</legend>
 108             <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
 109             <label for="checkbox-6">b</label>
 110             <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
 111             <label for="checkbox-7"><em>i</em></label>
 112             <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
 113             <label for="checkbox-8">u</label>
 114           </fieldset>
 115         </div>
 116         <div data-role="fieldcontain">
 117           <fieldset data-role="controlgroup">
 118             <legend>Choose a pet:</legend>
 119             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
 120             <label for="radio-choice-1">Cat</label>
 121             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
 122             <label for="radio-choice-2">Dog</label>
 123             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
 124             <label for="radio-choice-3">Hamster</label>
 125             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
 126             <label for="radio-choice-4">Lizard</label>
 127           </fieldset>
 128         </div>
 129         <div data-role="fieldcontain">
 130           <fieldset data-role="controlgroup" data-type="horizontal">
 131             <legend>Layout view:</legend>
 132             <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
 133             <label for="radio-choice-c">List</label>
 134             <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
 135             <label for="radio-choice-d">Grid</label>
 136             <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
 137             <label for="radio-choice-e">Gallery</label>
 138           </fieldset>
 139         </div>
 140         <div data-role="fieldcontain">
 141           <label for="select-choice-1" class="select">Choose shipping method:</label>
 142           <select name="select-choice-1" id="select-choice-1">
 143             <option value="standard">Standard: 7 day</option>
 144             <option value="rush">Rush: 3 days</option>
 145             <option value="express">Express: next day</option>
 146             <option value="overnight">Overnight</option>
 147           </select>
 148         </div>
 149         <div data-role="fieldcontain">
 150           <label for="select-choice-3" class="select">Your state:</label>
 151           <select name="select-choice-3" id="select-choice-3">
 152             <option value="AL">Alabama</option>
 153             <option value="AK">Alaska</option>
 154             <option value="AZ">Arizona</option>
 155             <option value="AR">Arkansas</option>
 156             <option value="CA">California</option>
 157             <option value="CO">Colorado</option>
 158             <option value="CT">Connecticut</option>
 159             <option value="DE">Delaware</option>
 160             <option value="FL">Florida</option>
 161             <option value="GA">Georgia</option>
 162             <option value="HI">Hawaii</option>
 163             <option value="ID">Idaho</option>
 164             <option value="IL">Illinois</option>
 165             <option value="IN">Indiana</option>
 166             <option value="IA">Iowa</option>
 167             <option value="KS">Kansas</option>
 168             <option value="KY">Kentucky</option>
 169             <option value="LA">Louisiana</option>
 170             <option value="ME">Maine</option>
 171             <option value="MD">Maryland</option>
 172             <option value="MA">Massachusetts</option>
 173             <option value="MI">Michigan</option>
 174             <option value="MN">Minnesota</option>
 175             <option value="MS">Mississippi</option>
 176             <option value="MO">Missouri</option>
 177             <option value="MT">Montana</option>
 178             <option value="NE">Nebraska</option>
 179             <option value="NV">Nevada</option>
 180             <option value="NH">New Hampshire</option>
 181             <option value="NJ">New Jersey</option>
 182             <option value="NM">New Mexico</option>
 183             <option value="NY">New York</option>
 184             <option value="NC">North Carolina</option>
 185             <option value="ND">North Dakota</option>
 186             <option value="OH">Ohio</option>
 187             <option value="OK">Oklahoma</option>
 188             <option value="OR">Oregon</option>
 189             <option value="PA">Pennsylvania</option>
 190             <option value="RI">Rhode Island</option>
 191             <option value="SC">South Carolina</option>
 192             <option value="SD">South Dakota</option>
 193             <option value="TN">Tennessee</option>
 194             <option value="TX">Texas</option>
 195             <option value="UT">Utah</option>
 196             <option value="VT">Vermont</option>
 197             <option value="VA">Virginia</option>
 198             <option value="WA">Washington</option>
 199             <option value="WV">West Virginia</option>
 200             <option value="WI">Wisconsin</option>
 201             <option value="WY">Wyoming</option>
 202           </select>
 203         </div>
 204         <div class="ui-body ui-body-b">
 205           <fieldset class="ui-grid-a">
 206             <div class="ui-block-a">
 207               <button type="submit" data-theme="d">Cancel</button>
 208             </div>
 209             <div class="ui-block-b">
 210               <button type="submit" data-theme="a">Submit</button>
 211             </div>
 212           </fieldset>
 213         </div>
 214       </form>
 215     </div>
 216     <h3>Notes</h3>
 217     <ul>
 218         <li>iOS
 219         <ul>
 220         <li>None</li>
 221         </ul>
 222         </li>
 223         <li>Android
 224         <ul>
 225         <li>HTC Incredible - Android 2.1 (HTC Sense)
 226           <ul>
 227             <li>Calling preventDefault() on the touchstart event prevents te following elements from working properly:
 228               <ul>
 229                 <li>Textfield</li>
 230                 <li>Textarea</li>
 231                 <li>Checkbox</li>
 232                 <li>Radio</li>
 233                 <li>Button</li>
 234                 </ul>
 235             </li>
 236             </ul>
 237         </li>
 238         <li>Motorola Droid X - Android 2.2 ()</li>
 239         </ul>
 240         </li>
 241         <li>Black Berry OS 6
 242         <ul>
 243         <li>None</li>
 244         </ul>
 245         </li>
 246     </ul>
 247   </div>
 248   <!-- /content -->
 249 </div>
 250 <!-- /page -->
 251
 252 </body>
 253 </html>