Updated the readme file.
[ReadingsJQM.git] / 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>