snippets/lists.html

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