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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Content Themes</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>Theming content</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">
<h2>Theming the content area</h2>
<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and the end of the page.)</p>
<p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
<code>
<div data-role="page" <strong> data-theme="a"</strong> <strong>data-content-theme="a"</strong>>
</code>
<h2>Theming collapsible blocks</h2>
<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icons can be set with the <code>data-collapsed-icon</code> attribute for the collapsed state and the <code>data-expanded-icon</code> attribute for the expanded state of a collapsible. The body is themable through the data attribute <code>data-content-theme</code>.</p>
<code>
<div data-role="collapsible" data-collapsed="true" <strong> data-theme="a"></strong>
</code>
<h2>Themed examples</h2>
<p>Swatch <strong>"a"</strong> on content & collapsible</p>
<div class="ui-body ui-body-a">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p>Swatch <strong>"b"</strong> on content & collapsible</p>
<div class="ui-body ui-body-b">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p>Swatch <strong>"c"</strong> on content & collapsible</p>
<div class="ui-body ui-body-c">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="c">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p>Swatch <strong>"d"</strong> on content & collapsible</p>
<div class="ui-body ui-body-d">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="d">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="d" data-content-theme="d">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p>Swatch <strong>"e"</strong> on content & collapsible</p>
<div class="ui-body ui-body-e">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="e">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="e" data-content-theme="e">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p>Swatch <strong>"b"</strong> on content & collapsible, using different icons</p>
<div class="ui-body ui-body-b">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
</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">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li data-theme="a"><a href="content-themes.html">Theming content</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>
|
