widgets/scrollview_x.html

   1 <!DOCTYPE html>
   2 <div data-role="page" data-add-back-btn="true">
   3         <div data-role="header" data-position="fixed">
   4                 <h1>Scrollview</h1>
   5         </div>
   6         <div data-role="content">
   7                 <p>Horizontal Scroll #1: inline block</p>
   8                 <div style="white-space:nowrap;" data-scroll="x">
   9                         <div class="ui-scrollview-view" style="display:inline-block">
  10                                 <img src="./test/01.jpg" height="70px">
  11                                 <img src="./test/02.jpg" height="70px">
  12                                 <img src="./test/03.jpg" height="70px">
  13                                 <img src="./test/04.jpg" height="70px">
  14                                 <img src="./test/05.jpg" height="70px">
  15                                 <img src="./test/06.jpg" height="70px">
  16                                 <img src="./test/07.jpg" height="70px">
  17                                 <img src="./test/08.jpg" height="70px">
  18                                 <img src="./test/10.jpg" height="70px">
  19                                 <img src="./test/11.jpg" height="70px">
  20                         </div>
  21                 </div>
  22                 <p>Horizontal Scroll #2: set the width of view</p>
  23                 <div data-scroll="x">
  24                         <div class="ui-scrollview-view" style="width:1185px">
  25                                 <img src="./test/01.jpg" height="70px">
  26                                 <img src="./test/02.jpg" height="70px">
  27                                 <img src="./test/03.jpg" height="70px">
  28                                 <img src="./test/04.jpg" height="70px">
  29                                 <img src="./test/05.jpg" height="70px">
  30                                 <img src="./test/06.jpg" height="70px">
  31                                 <img src="./test/07.jpg" height="70px">
  32                                 <img src="./test/08.jpg" height="70px">
  33                                 <img src="./test/10.jpg" height="70px">
  34                                 <img src="./test/11.jpg" height="70px">
  35                         </div>
  36                 </div>
  37         </div><!-- /content -->
  38         <div data-role="footer">
  39         </div>
  40 </div> <!-- /page -->