forked from jquery-archive/jquery-mobile
/
docs-footers.html
153 lines (100 loc) · 7.32 KB
/
docs-footers.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Footer Configuration</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">
<div data-role="header" data-theme="f">
<h1>Footers</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>Footer bar structure</h2>
<p>The <code>footer</code> bar has the same basic structure as the <a href="docs-headers.html">header</a> except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
<div class="highlight">
<pre>
<span class="nt"><div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">></span>
<span class="nt"><h4></span>Footer content<span class="nt"></h4></span>
<span class="nt"></div></span>
</pre>
</div>
<p>The <code>footer</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
<div data-role="footer">
<h4>Footer content</h4>
</div>
<p>The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers.</p>
<p>Since footers do not have the same prescriptive markup conventions as headers, we recommend using layout <a href="../content/content-grids.html">grids</a> or writing custom styles to achieve the design you want.</p>
<h2>Adding buttons</h2>
<p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
<p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
<pre><code>
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
</code></pre>
<p>This creates this toolbar with buttons sitting in a row</p>
<div data-role="footer" class="ui-bar">
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element.</p>
<p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role="controlgroup"</code> and <code>data-type="horizontal"</code> attributes.</p>
<code><div data-role="controlgroup" data-type="horizontal"></code>
<p>This creates a grouped set of buttons:</p>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>
<h2>Adding form elements</h2>
<p><a href="../forms/forms-all.html">Forms</a> elements and other content can also be added to toolbars. Here is an example of a <a href="../forms/selects/index.html">select</a> menu inside a footer bar. We recommend using <a href="../forms/forms-all-mini.html" >mini-sized</a> form elements in toolbars by adding the <code>data-mini="true"</code> attribute:</p>
<div data-role="footer" class="ui-bar">
<label for="select-choice-1">Shipping:</label>
<select name="select-choice-1" id="select-choice-1" data-theme="a" data-mini="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<h2>Fixed & Persistent footers</h2>
<p>In situations where the footer is a global navigation element, you may want it to appear <a href="bars-fixed.html">fixed</a> so it doesn't scroll out of view. It's also possible to make a fixed toolbar <a href="footer-persist-d.html">persistent</a> so it appears to not move between <a href="../pages/page-transitions.html">page transitions</a>. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
<p>To make a footer persistent between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. <strong>This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</strong></p>
</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 data-theme="a"><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><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>© 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>