This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
bars-fixed-methods.html
120 lines (92 loc) · 4.67 KB
/
bars-fixed-methods.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fixed Toolbars</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-position="fixed" data-theme="f">
<h1>Fixed toolbars</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">
<h2>Fixed toolbars</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
<li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
<li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>The fixedtoolbar plugin has the following methods:</p>
<dl>
<dt><code>show</code> show the toolbar</dt>
<dd>
<pre><code>
$("[data-position='fixed']").fixedtoolbar('show');
</code>
</pre>
<div class="ui-body ui-body-e">
<p><strong>Note:</strong> Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:</p>
<pre><code>
$.mobile.fixedToolbars.show(true);
</code></pre>
</div>
</dd>
<dt><code>hide</code> hide the toolbar (if it's not a fullscreen toolbar, it'll toggle back to static positioning, which may or may not be hidden from view depending on scroll)</dt>
<dd>
<pre><code>
$("[data-position='fixed']").fixedtoolbar('hide');
</code></pre>
</dd>
<dt><code>toggle</code> calls either the show or the hide method, depending on whether the toolbar is visible.</dt>
<dd>
<pre><code>
$("[data-position='fixed']").fixedtoolbar('toggle');
</code></pre>
</dd>
<dt><code>updatePagePadding</code> update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.</dt>
<dd>
<pre><code>
$("[data-position='fixed']").fixedtoolbar('updatePagePadding');
</code></pre>
<p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
</dd>
<dt><code>destroy</code> destroy at fixedtoolbar (restore the element to its initial state)</dt>
<dd>
<pre><code>
$("[data-position='fixed']").fixedtoolbar('destroy');
</code></pre>
</dd>
</dl>
</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 data-theme="a"><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" data-theme="a" data-position="fixed">
<h1>Fixed Footer</h1>
</div>
</div><!-- /page -->
</body>
</html>