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