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
/
docs-bars.html
86 lines (58 loc) · 5.17 KB
/
docs-bars.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Toolbar Basics</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>Toolbar basics</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>Toolbar types</h2>
<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
<ul> <li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/page-anatomy.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>
<li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
</ul>
<p>It's very common to have a horizontal navigation or tab bar inside the header or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>
<h2>Toolbar positioning options</h2>
<p>The header and footer can be positioned on the page in a few different ways. By default, the toolbars use the <strong>"inline" positioning</strong> mode. In this mode, the header and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.</p>
<p>A <a href="bars-fixed.html"><strong>"fixed" positioning mode</strong></a> fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (which includes most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline position in the page.</p>
<p> When tap-toggling is enabled, tapping the screen will toggle the visibility of the fixed toolbars. Tapping the page when the toolbars aren't visible brings them into view. Tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.</p>
<p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the header or footer element.</p>
<p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be hidden or summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</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 data-theme="a"><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><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>Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors</p>
</div>
</div><!-- /page -->
</body>
</html>