mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-04 12:54:41 +00:00
edits to headers docs
This commit is contained in:
Todd Parker
parent
49b3d79670
commit
406db2731e
2 changed files with 40 additions and 28 deletions
|
|
@ -15,18 +15,8 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Header & footer bar structure</h2>
|
||||
<p>The <code>header</code> is an bar 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>
|
||||
|
||||
<a href="docs-headers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Header configuration options</a>
|
||||
|
||||
<p>The <code>footer</code> bar has the same structure as the header except for the <code>data-role</code> attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.</p>
|
||||
|
||||
|
|
@ -41,7 +31,7 @@
|
|||
<a href="docs-footers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Footer configuration options</a>
|
||||
|
||||
|
||||
<h2>Bar positioning and behavior</h2>
|
||||
<h2>Positioning options</h2>
|
||||
|
||||
<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "fixed" positioning mode. In this mode, the headers and footer are sitting in the natural document flow, which ensures that they are visible on all devices, regardless of JavaScript support.</p>
|
||||
<p>To achieve the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript, the framework adds logic to detect when a bar has been scrolled out of view and animates them back into place by dynamically re-positioning the bar to the top or bottom of the viewport. At any time,tapping the screen will toggle the visibility of the toolbars: tapping when they aren't visible brings the toolbars 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.</p>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Header configuration</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
|
|
@ -26,23 +26,41 @@
|
|||
</pre>
|
||||
</div>
|
||||
|
||||
<p>The <code>header</code> toolbar will be be themed with the "a" swatch by default (black in the default theme).</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>Header buttons</h2>
|
||||
|
||||
<p>In the standard header configuration, there are slots for up to two buttons on either side of the text heading. Each button is an <code>anchor</code> element that points to any <code>URI</code>. The button's width fits the length of the text and icons it contains. The header plugin looks for immediate children of the header container and will automatically set the first link found in the left button slot and the second link in the right button slot.</p>
|
||||
|
||||
<p>In this example, the Home button will appear in the left slot and Edit will appear in the right slot. If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.php"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"edit.php"</span><span class="nt">></span>Edit<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
<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</a> so button is only as wide as the text and icons they contain. </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" data-theme="b">Save</a>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<h3>Button positions</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>
|
||||
|
||||
<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 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>Button position 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">
|
||||
|
|
@ -52,7 +70,11 @@
|
|||
</pre>
|
||||
</div>
|
||||
|
||||
<p>If there isn't a user-defined button in the left slot, the framework will auto-generate a "back" button in that slot to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: <code>data-nobackbtn="true"</code>.</p>
|
||||
<p>If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</p>
|
||||
|
||||
<h3>Back buttons</h3>
|
||||
|
||||
<p>If there isn't a user-defined button in the left slot, the framework will automatically generate a "back" button to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: <code>data-nobackbtn="true"</code> to the header container.</p>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue