Added some basic JQM overrides
[ReadingsJQM.git] / 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.0.1/jquery.mobile-1.0.1.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.6.4.min.js"></script>
24         <script src="/js/mobileinit.js"></script>
25         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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>