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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Theming Toolbars</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.2.0.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/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Bar theming </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>
<div data-role="content">
<div class="content-primary">
<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
<h2>Theming headers and footers</h2>
<p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
<span class="nt"></div></span>
</pre>
</div>
<h2>Theming buttons in toolbars</h2>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop out, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<div class="highlight">
<pre>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>Save<span class="nt"></a></span>
</pre>
</div>
<h2>Theme variations</h2>
<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
<h3>Headers</h3>
<div data-role="header">
<h1>Bar swatch "a"</h1>
<a href="index.html" data-icon="plus" data-theme="c">New</a>
</div>
<div data-role="header">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar swatch "a"</h1>
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
</div>
<div data-role="header" data-theme="b">
<h1>Bar swatch "b"</h1>
<a href="index.html" data-icon="plus" data-theme="a">New</a>
</div>
<div data-role="header" data-theme="b">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar swatch "b"</h1>
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
</div>
<div data-role="header" data-theme="c">
<h1>Bar swatch "c"</h1>
<a href="index.html" data-icon="plus" data-theme="a">New</a>
</div>
<div data-role="header" data-theme="c">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar swatch "c"</h1>
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
</div>
<div data-role="header" data-theme="d">
<h1>Bar swatch "d"</h1>
<a href="index.html" data-icon="plus" data-theme="a">New</a>
</div>
<div data-role="header" data-theme="d">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar swatch "d"</h1>
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
</div>
<div data-role="header" data-theme="e">
<h1>Bar swatch "e"</h1>
<a href="index.html" data-icon="plus" data-theme="a">New</a>
</div>
<div data-role="header" data-theme="e">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar swatch "e"</h1>
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
</div>
<h3>Footers</h3>
<p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup conventions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
<div data-role="footer" data-theme="a">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
</div>
<div data-role="footer" data-theme="b">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
</div>
<div data-role="footer" data-theme="c">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
</div>
<div data-role="footer" data-theme="d">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
</div>
<div data-role="footer" data-theme="e">
<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</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">Toolbars</li>
<li><a href="docs-bars.html">Toolbar basics</a></li>
<li><a href="docs-headers.html">Header bars</a></li>
<li><a href="docs-footers.html">Footer bars</a></li>
<li><a href="docs-navbar.html">Navbars</a></li>
<li><a href="bars-fixed.html">Fixed positioning</a></li>
<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
<li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p class="jqm-version"></p>
<p>© 2012 jQuery Foundation and other contributors</p>
</div>
</div><!-- /page -->
</body>
</html>
|
