This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
buttons-icons.html
executable file
·215 lines (177 loc) · 14.8 KB
/
buttons-icons.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Button icons</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Button icons</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Adding Icons to Buttons</h2>
<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
<code>
<a href="index.html" data-role="button" <strong> data-icon="delete"</strong>>Delete</a>
</code>
<p>Creates this button with an icon:</p>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
<h2>Icon set</h2>
<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
<p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
<p><strong>Delete</strong> - data-icon="delete"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p><strong>Plus</strong> - data-icon="plus"</p>
<a href="index.html" data-role="button" data-icon="plus">My button</a>
<p><strong>Minus</strong> - data-icon="minus"</p>
<a href="index.html" data-role="button" data-icon="minus">My button</a>
<p><strong>Check</strong> - data-icon="check"</p>
<a href="index.html" data-role="button" data-icon="check">My button</a>
<p><strong>Gear</strong> - data-icon="gear"</p>
<a href="index.html" data-role="button" data-icon="gear">My button</a>
<p><strong>Refresh</strong> - data-icon="refresh"</p>
<a href="index.html" data-role="button" data-icon="refresh">My button</a>
<p><strong>Forward</strong> - data-icon="forward"</p>
<a href="index.html" data-role="button" data-icon="forward">My button</a>
<p><strong>Back</strong> - data-icon="back"</p>
<a href="index.html" data-role="button" data-icon="back">My button</a>
<p><strong>Grid</strong> - data-icon="grid"</p>
<a href="index.html" data-role="button" data-icon="grid">My button</a>
<p><strong>Star</strong> - data-icon="star"</p>
<a href="index.html" data-role="button" data-icon="star">My button</a>
<p><strong>Alert</strong> - data-icon="alert"</p>
<a href="index.html" data-role="button" data-icon="alert">My button</a>
<p><strong>Info</strong> - data-icon="info"</p>
<a href="index.html" data-role="button" data-icon="info">My button</a>
<p><strong>Home</strong> - data-icon="home"</p>
<a href="index.html" data-role="button" data-icon="home">My button</a>
<p><strong>Search</strong> - data-icon="search"</p>
<a href="index.html" data-role="button" data-icon="search">My button</a>
<h2>Icon positioning</h2>
<p>By default, all icons in buttons are placed to the left of the button text. </p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
<code>
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
</code>
<p>Creates this button with right-aligned icon:</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
<p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
<p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
<code>
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
</code>
<p>Creates this icon-only button:</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<h2>Custom Icons</h2>
<p>To use custom icons, specify a <code> data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
<h2>Icons and themes</h2>
<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.</p>
<!-- A themed -->
<p><strong>Swatch "A"</strong> themed buttons</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
</div>
<!-- B themed -->
<p><strong>Swatch "B"</strong> themed buttons</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
</div>
<!-- C themed -->
<p><strong>Swatch "C"</strong> themed buttons</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
</div>
</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">Buttons</li>
<li><a href="buttons-types.html">Button basics</a></li>
<li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
<li><a href="buttons-themes.html">Theming buttons</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>