mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-22 17:00:24 +00:00
117 lines
No EOL
5.5 KiB
HTML
Executable file
117 lines
No EOL
5.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Toolbars</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Footer configuration</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<h2>Footer bar structure</h2>
|
|
|
|
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code>data-role</code> attribute value of <code>footer</code>. </p>
|
|
|
|
<div class="highlight">
|
|
<pre>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><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" data-position="inline">
|
|
<h4>Footer content</h4>
|
|
</div>
|
|
|
|
<p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. </p>
|
|
|
|
|
|
|
|
<h2>Adding buttons</h2>
|
|
|
|
<p>Any link added to the footer will be automatically turned into a button but any valid <a href="../buttons/buttons-types.html">button markup</a> will work.. 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 they contain. </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="delete">Remove</a>
|
|
<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" data-position="inline">
|
|
<a href="index.html" data-icon="delete">Remove</a>
|
|
<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>To group the buttons together into a button set, wrap the links in a wrapper with <code>data-role="controlgroup" 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" data-position="inline">
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="index.html" data-icon="delete">Remove</a>
|
|
<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>Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar:</p>
|
|
|
|
|
|
<div data-role="footer" class="ui-bar" data-position="inline">
|
|
<label for="select-choice-1">Shipping:</label>
|
|
<select name="select-choice-1" id="select-choice-1" data-theme="a">
|
|
<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>Persistent footers</h2>
|
|
<p>In situations where the footer is being used as a global navigation element, you may want the footer to appear like it is fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile. To make a footer appear to stay in place between transitions, simply add the <code>data-id</code> attribute to the footer of both 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. This effect will only work correctly if the header and footer toolbars are set to sticky so they are in view during the transition.</p>
|
|
|
|
|
|
<p>If you want the footer to appear persistent as you navigate between pages (especially useful if using a nav bar, see below), you can achieve this effect by adding a <code>data-id</code> attribute to each page that should have the persistent footer. Giving a set of pages the same <code>data-id</code> attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.</p>
|
|
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |