This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
lists-readonly.html
174 lines (141 loc) · 6.11 KB
/
lists-readonly.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Inset Readonly Lists</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<style type="text/css">
h2 { margin:50px 0 30px 0; }
</style>
<div data-role="header" data-theme="f">
<h1>Readonly lists</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>Here is a variety of full-width lists that are read-only. If a list has the <code>data-role="listview"</code> attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, except they don't have a right arrow and the text is set to a smaller size to save space.</p>
<h2>Simple list</h2>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<h2>Count bubbles</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
<h2>Numbered list</h2>
<ol data-role="listview">
<li>The Godfather</li>
<li>Inception</li>
<li>The Good, the Bad and the Ugly </li>
<li>Pulp Fiction</li>
<li>Schindler's List</li>
</ol>
<h2>Divided, formatted content</h2>
<ul data-role="listview">
<li>
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</li>
<li>
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</li>
</ul>
<h2>Icon list</h2>
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
</ul>
<h2>Thumbnail list</h2>
<ul data-role="listview">
<li>
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
</li>
</ul>
<h2>Divided, filterable list</h2>
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
<li data-role="list-divider">C</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">List views</li>
<li><a href="docs-lists.html">List basics & API</a></li>
<li><a href="lists-ul.html">Basic linked list</a></li>
<li><a href="lists-nested.html">Nested list</a></li>
<li><a href="lists-ol.html">Numbered list</a></li>
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
<li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
<li><a href="lists-formatting.html">Content formatting</a></li>
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li data-theme="a"><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
<li><a href="lists-forms.html">Lists with forms</a></li>
<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
<li><a href="lists-inset.html">Inset styled lists</a></li>
<li><a href="lists-performance.html">List performance test</a></li>
<li><a href="lists-themes.html">Theming lists</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>