mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
95 lines
No EOL
5.1 KiB
HTML
Executable file
95 lines
No EOL
5.1 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" data-position="inline">
|
|
<h1>Header bars</h1>
|
|
<a href="index.html" class="ui-btn-right">Save</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<h2>Header structure</h2>
|
|
<p>The <code>header</code> is an toolbar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
|
|
|
|
<div class="highlight">
|
|
<pre>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>
|
|
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
|
|
<span class="nt"></div></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The <code>header</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="header" data-position="inline">
|
|
<h1>Page title</h1>
|
|
</div>
|
|
|
|
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button for you to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header either add your own button to the left slot (see below) or, add this attribute: <code>data-nobackbtn="true"</code> to the header container.
|
|
|
|
<h2>Adding buttons</h2>
|
|
|
|
<p>In the standard header configuration, there are slots buttons on either side of the text heading. Each button is typically an <code>anchor</code> element but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are 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>
|
|
|
|
|
|
<h3>Default button positioning</h3>
|
|
|
|
<p>The header plugin looks for immediate children of the header container and will automatically set the first link found into the left button slot and the second link into the right button slot. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot because of their sequence in the source order. </p>
|
|
|
|
|
|
<pre><code>
|
|
<div data-role="header" data-position="inline">
|
|
<a href="index.html" data-icon="delete">Cancel</a>
|
|
<h1>Edit Contact</h1>
|
|
<a href="index.html" data-icon="check"</a>
|
|
</div>
|
|
</code></pre>
|
|
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<a href="index.html" data-icon="delete">Cancel</a>
|
|
<h1>Edit Contact</h1>
|
|
<a href="index.html" data-icon="check">Save</a>
|
|
</div>
|
|
<p>Buttons automatically adapt to the color of the bar they sit in so a link in a header bar with the "a" swatch color will also be styled as "a" colored buttons. To make the right button visually stand out, use add the <code>data-theme</code> attribute and set the color swatch for the button, "b" in this case.</p>
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<a href="index.html" data-icon="delete">Cancel</a>
|
|
<h1>Edit Contact</h1>
|
|
<a href="index.html" data-icon="check" data-theme="b">Save</a>
|
|
</div>
|
|
|
|
<h3>Controlling button position with classes</h3>
|
|
|
|
<p>The button position can also be controlled by adding classes to the button anchors instead of relying on source order. This is especially useful if there isn't a left button and you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
|
|
|
|
|
|
|
|
<div class="highlight">
|
|
<pre><code>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"tools.php"</span> <span class="na">class=</span><span class="s">"ui-btn-right"</span><span class="nt">></span>Tools<span class="nt"></a></span>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<h1>Page Title</h1>
|
|
<a href="index.html" class="ui-btn-right">Save</a>
|
|
</div>
|
|
|
|
<h2>Custom header configurations</h2>
|
|
<p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic at all. This is especially useful if you want to embed a widget like <a href="navbar.html">Nav bar</a> into the header bar</p>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |