libs/js/jquery-mobile-1.0.1pre/experiments/scrollview/sv-test-02.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 02 - Scrollview Events Test</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/"/>
   8         <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
   9         <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
  10     <style>
  11 #evtCatcher {
  12         border: solid 1px black;
  13         background-color: #FF9;
  14         padding: 10px;
  15         height: 300px;
  16 }
  17 #evtCatcher .ui-scrollview-view {
  18         padding: 10px;
  19 }
  20         </style>
  21         <script src="../../js/jquery.js"></script>
  22         <script src="../../js/"></script>
  23         <script src="../../docs/lists/docs/docs.js"></script>
  24         <script src="jquery.easing.1.3.js"></script>
  25         <script src="jquery.mobile.scrollview.js"></script>
  26         <!-- script src="scrollview.js"></script -->
  27         <script>
  28 $("[ data-role=page]").live("pageshow", function(event) {
  29         var $page = $(this);
  30         $page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
  31                 var $this = $(this);
  32                 // XXX: Remove this check for ui-scrolllistview once we've
  33                 //      integrated list divider support into the main scrollview class.
  34                 if ($this.hasClass("ui-scrolllistview"))
  35                         $this.scrolllistview();
  36                 else
  37                 {
  38                         var st = $this.data("scroll") + "";
  39                         var paging = st && st.search(/^[xy]p$/) != -1;
  40                         var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
  41
  42                         var opts = {};
  43                         if (dir)
  44                                 opts.direction = dir;
  45                         if (paging)
  46                                 opts.pagingEnabled = true;
  47
  48                         $this.scrollview(opts);
  49                 }
  50         });
  51
  52         changeDelayFormElementClick();
  53 });
  54
  55 function changeScrollMethod()
  56 {
  57         var val = $("#s_method").val();
  58         var $sv = $("#evtCatcher").scrollview("scrollTo", 0, 0);
  59         if (val === "scroll") {
  60                 $sv.css("overflow", "scroll");
  61         }
  62         else {
  63                 $sv.css("overflow", "hidden");
  64         }
  65         $sv.data("scrollview").options.scrollMethod = val;
  66 }
  67
  68 function changeDelayFormElementClick()
  69 {
  70         $("#evtCatcher").data("scrollview").options.delayedClickEnabled = ($("#s_delay").val() === "yes");
  71 }
  72
  73 var cb_hd_pd,
  74     cb_hd_sp,
  75     cb_hm_pd,
  76     cb_hm_sp,
  77     cb_hu_pd,
  78     cb_hu_sp;
  79
  80 var hd = $.mobile.scrollview.prototype._handleDragStart;
  81 var hm = $.mobile.scrollview.prototype._handleDragMove;
  82 var hu = $.mobile.scrollview.prototype._handleDragStop;
  83
  84 function getDummyEvent(o)
  85 {
  86         return { target: o.target, _pd: false, _sp: false, preventDefault: function(){ this._pd = true; }, stopPropagation: function(){ this._sp = true; }};
  87 }
  88
  89 function updateEvent(e, cb_pd, cb_sp)
  90 {
  91         if (cb_pd.checked)
  92                 e.preventDefault();
  93         if (cb_sp.checked)
  94                 e.stopPropagation();
  95 }
  96
  97 $.mobile.scrollview.prototype._handleDragStart = function(e,x,y)
  98 {
  99         hd.call(this, getDummyEvent(e), x, y);
 100         updateEvent(e, cb_hd_pd, cb_hd_sp);
 101 };
 102
 103 $.mobile.scrollview.prototype._handleDragMove = function(e,x,y)
 104 {
 105         hm.call(this, getDummyEvent(e), x, y);
 106         updateEvent(e, cb_hm_pd, cb_hm_sp);
 107 };
 108
 109 $.mobile.scrollview.prototype._handleDragStop = function(e)
 110 {
 111         hu.call(this, getDummyEvent(e));
 112         updateEvent(e, cb_hu_pd, cb_hu_sp);
 113 };
 114
 115 $(function(){
 116         cb_hd_pd = $("#cb_hd_pd")[0];
 117         cb_hd_sp = $("#cb_hd_sp")[0];
 118         cb_hm_pd = $("#cb_hm_pd")[0];
 119         cb_hm_sp = $("#cb_hm_sp")[0];
 120         cb_hu_pd = $("#cb_hu_pd")[0];
 121         cb_hu_sp = $("#cb_hu_sp")[0];
 122 });
 123         </script>
 124         </head>
 125         <body>
 126 <div data-role="page">
 127       <div data-role="header">
 128     <h1>Scroll View Events Test</h1>
 129   </div>
 130       <!-- /header -->
 131
 132       <div data-role="content">
 133     <h3>Test</h3>
 134     <p>This page wraps the _handleDragStart, _handleDragMove, and _handleDragStop events of the scrollview widget so that the checkboxes below can determine how the native event is treated. You can use this page to figure out what events need to be caught and what special treatment is necessary to prevent native scrolling. You can also test the effect of that treatment on form elements within the sample scrollview.</p>
 135     <div data-role="fieldcontain">
 136         <label for="s_method" class="select">Scrolling Method:</label>
 137         <select name="s_method" id="s_method" onchange="changeScrollMethod();">
 138             <option value="translate" selected="selected">CSS3 Transform/Translate</option>
 139             <option value="position">CSS Top/Left Positioning</option>
 140             <option value="scroll">scrollTop/scrollLeft</option>
 141         </select>
 142     </div>
 143
 144     <div data-role="fieldcontain">
 145         <label for="s_delay" class="select">Delay Form Element Click:</label>
 146         <select name="s_delay" id="s_delay" onchange="changeDelayFormElementClick();">
 147             <option value="yes">Yes</option>
 148             <option value="no" selected="selected">No</option>
 149         </select>
 150     </div>
 151
 152     <div  data-role="fieldcontain">
 153           <fieldset data-role="controlgroup">
 154         <input type="checkbox" name="cb_hd_pd" id="cb_hd_pd" checked="checked" />
 155         <label for="cb_hd_pd">touchstart - Prevent Default</label>
 156         <input type="checkbox" name="cb_hd_sp" id="cb_hd_sp" checked="checked" />
 157         <label for="cb_hd_sp">touchstart - Stop Propagation</label>
 158         <input type="checkbox" name="cb_hm_pd" id="cb_hm_pd" checked="checked" />
 159         <label for="cb_hm_pd">touchmove - Prevent Default</label>
 160         <input type="checkbox" name="cb_hm_sp" id="cb_hm_sp" />
 161         <label for="cb_hm_sp">touchmove - Stop Propagation</label>
 162         <input type="checkbox" name="cb_hu_pd" id="cb_hu_pd" />
 163         <label for="cb_hu_pd">touchstop - Prevent Default</label>
 164         <input type="checkbox" name="cb_hu_sp" id="cb_hu_sp" />
 165         <label for="cb_hu_sp">touchstop - Stop Propagation</label>
 166       </fieldset>
 167         </div>
 168     <div id="evtCatcher" data-scroll="y">
 169 <div  data-role="fieldcontain">
 170     <label for="tf1">Textfield</label>
 171     <input type="text" name="tf1" id="tf1" />
 172 </div>
 173 <div  data-role="fieldcontain">
 174     <label for="ta1">Textarea</label>
 175     <textarea name="ta1" id="ta1" rows="5" cols="10"></textarea>
 176 </div>
 177 <div  data-role="fieldcontain">
 178     <label for="ta1">Select</label>
 179     <select name="s1" id="s1">
 180         <option value="1" selected="selected">Option 1</option>
 181         <option value="2">Option 2</option>
 182         <option value="3">Option 3</option>
 183         <option value="4">Option 4</option>
 184         <option value="5">Option 5</option>
 185     </select>
 186 </div>
 187 <div  data-role="fieldcontain">
 188     <label for="ta1">Button</label>
 189     <input type="button" name="b1" id="b1" value="Button" />
 190 </div>
 191 <div  data-role="fieldcontain">
 192           <fieldset data-role="controlgroup">
 193         <input type="checkbox" name="cb1" id="cb1" />
 194         <label for="cb1">Checkbox 1</label>
 195         <input type="checkbox" name="cb2" id="cb2" />
 196         <label for="cb2">Checkbox 2</label>
 197         </fieldset>
 198 </div>
 199
 200           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 201           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 202           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 203           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 204           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 205           <p>&nbsp;</p>
 206           <p></p>
 207         </div>
 208         <h3>Disabling Native Scrolling</h3>
 209         <p>In order to get faux scrolling to work, we need to prevent the native viewport scrolling from happening. Unfortunately the way you prevent this from happening differs on some mobile webkit platforms. Below is a table that shows what event needs to be caught, and what methods (preventDefault() and/or stopPropagation()) need to be called on that event to prevent native scrolling.<table border="1">
 210         <tr><th>Device/OS</th><th>D-PD</th><th>D-SP</th><th>M-PD</th><th>M-SP</th><th>U-PD</th><th>U-SP</th></tr>
 211         <tr><th>iOS 3.2</th><th></th><th></th>
 212         <th>X</th><th></th><th></th><th></th></tr>
 213         <tr><th>DroidX/Android 2.2</th>
 214         <th>X</th><th></th><th></th><th></th><th></th><th></th></tr>
 215         <tr><th>HTC Incredible/Android 2.1</th>
 216         <th>X</th>
 217         <th>X</th><th></th><th></th><th></th><th></th></tr>
 218         <tr><th>BB Torch/OS 6</th><th></th><th></th>
 219         <th>X</th>
 220         <th></th><th></th><th></th></tr>
 221     </table>
 222 <h4>Notes</h4>
 223 <ul>
 224 <li>The HTC Incredible seems to have a bug that triggers occassionally, where timers will be suspended until the viewport is scrolled.</li>
 225 <li>On Android devices, calling preventDefault() on the touchstart event, prevents form elements from getting click events and focus.</li>
 226 <li>On iOS, clicking and dragging within a form element (like textfield/textarea) will always cause the viewport to scroll, event if preventDefault() and stopPropagation() are called on both touchstart and touchmove events.</li>
 227 </ul>
 228     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 229     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 230     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 231     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 232     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 233     <p>&nbsp;</p>
 234     <p></p>
 235   </div>
 236       <!-- /content -->
 237     </div>
 238 <!-- /page -->
 239
 240 </body>
 241 </html>