snippets/lists.html

   1 <!--
   2         jQuery Mobile Boilerplate
   3 -->
   4 <!doctype html>
   5 <html>
   6 <head>
   7         <meta charset="utf-8">
   8         <meta name="viewport" content="width=device-width, initial-scale=1">
   9         <title> jQuery Mobile Boilerplate </title>
  10         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  11
  12         <!-- if you have a custom theme, add it here -->
  13         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
  14
  15         <link rel="stylesheet" href="css/custom.css" />
  16
  17         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  18         <script src="js/application.js"></script>
  19         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  20
  21 </head>
  22 <body>
  23         <div data-role="page">
  24
  25                 <div data-role="header">
  26                         <a href="../index.html" data-icon="home">Home</a>
  27                         <h1>Listsviews</h1>
  28                 </div>
  29
  30                 <div data-role="content">
  31
  32
  33
  34
  35
  36 <h2>Basic Listview</h2>
  37
  38 <ul data-role="listview" data-inset="true">
  39         <li>Robert Heinlein</li>
  40         <li>SM Stirling</li>
  41         <li>Julian May</li>
  42         <li>JRR Tolkien</li>
  43         <li>Piers Anthony</li>
  44 </ul>
  45
  46 <h2>Linked List</h2>
  47
  48 <ul data-role="listview" data-inset="true">
  49         <li><a href="../index.html">Robert Heinlein</a></li>
  50         <li><a href="../index.html">SM Stirling</a></li>
  51         <li><a href="../index.html">Julian May</a></li>
  52 </ul>
  53
  54 <h2>Linked List</h2>
  55
  56 <ul data-role="listview" data-inset="true">
  57         <li>
  58                 <h3>Robert Heinlein</h3>
  59                 <p>A selection of his books.</p>
  60                 <ul>
  61                         <li>Starship Troopers</li>
  62                         <li>Friday</li>
  63                         <li>Door into Summer</li>
  64                 </ul>
  65         </li>
  66         <li>
  67                 <h3>SM Stirling</h3>
  68                 <p>A selection of his books.</p>
  69                 <ul>
  70                         <li>Dies the Fire</li>
  71                         <li>The Protector's War</li>
  72                         <li>A Meeting at Corvallis</li>
  73                 </ul>
  74         </li>
  75         <li>
  76                 <h3>Julian May</h3>
  77                 <p>A selection of her books.</p>
  78                 <ul>
  79                         <li>The Many-Colored Land</li>
  80                         <li>The Golden Torc</li>
  81                         <li>The Nonborn King</li>
  82                         <li>The Adversary</li>
  83                 </ul>
  84         </li>
  85 </ul>
  86
  87 <h2>Numbered List</h2>
  88
  89 <ol data-role="listview" data-inset="true">
  90         <li><a href="index.html">Robert Heinlein</a></li>
  91         <li><a href="index.html">SM Stirling</a></li>
  92         <li><a href="index.html">Julian May</a></li>
  93 </ol>
  94
  95 <h2>Split-Button List</h2>
  96
  97 <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
  98         <li><a href="index.html">
  99                 <img src="images/album-bb.jpg" />
 100                 <h3>Broken Bells</h3>
 101                 <p>Broken Bells</p>
 102                 </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
 103         </a></li>
 104         <li><a href="index.html">
 105
 106                 <img src="images/album-hc.jpg" />
 107                 <h3>Warning</h3>
 108                 <p>Hot Chip</p>
 109
 110         </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
 111         </a></li>
 112         <li><a href="index.html">
 113                 <img src="images/album-p.jpg" />
 114                 <h3>Wolfgang Amadeus Phoenix</h3>
 115                 <p>Phoenix</p>
 116                 </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
 117         </a></li>
 118 </ul>
 119
 120 <h2>List Dividers</h2>
 121
 122 <ul data-role="listview" data-inset="true">
 123         <li data-role="list-divider">Men</li>
 124         <li>Robert Heinlein</li>
 125         <li>SM Stirling</li>
 126         <li>JRR Tolkien</li>
 127         <li>Piers Anthony</li>
 128         <li data-role="list-divider">Women</li>
 129         <li>Julian May</li>
 130 </ul>
 131
 132 <h2>Search Filter</h2>
 133
 134 <ul data-role="listview" data-inset="true" data-filter="true">
 135         <li data-role="list-divider">Men</li>
 136         <li>Robert Heinlein</li>
 137         <li>SM Stirling</li>
 138         <li>JRR Tolkien</li>
 139         <li>Piers Anthony</li>
 140         <li data-role="list-divider">Women</li>
 141         <li>Julian May</li>
 142 </ul>
 143
 144 <h2>Count Bubbles</h2>
 145
 146 <ul data-role="listview" data-inset="true" data-filter="true">
 147         <li>
 148                 Robert Heinlein
 149                 <span class="ui-li-count">32</span>
 150         </li>
 151         <li>
 152                 SM Stirling
 153                 <span class="ui-li-count">15</span>
 154         </li>
 155         <li>
 156                 JRR Tolkien
 157                 <span class="ui-li-count">9</span>
 158         </li>
 159         <li>
 160                 Piers Anthony
 161                 <span class="ui-li-count">42</span>
 162         </li>
 163         <li>
 164                 Julian May
 165                 <span class="ui-li-count">27</span>
 166         </li>
 167 </ul>
 168
 169
 170
 171
 172                 </div>
 173
 174                 <div data-role="footer" data-theme="c">
 175                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
 176                 </div>
 177
 178         </div>
 179 </body>
 180 </html>