mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
d5cbcf755b
Edited the PHP combiner and .htaccess logic to accommodate this change, as well as allowing manifest files to use a "../" when referencing files, which will be handy when adding themes that don't include structural files yet. Modified all HTML files to point to /themes/default for their theme.
69 lines
No EOL
4.6 KiB
HTML
Executable file
69 lines
No EOL
4.6 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>Toolbar basics</h1>
|
|
</div><!-- /header -->
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<a href="bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed bar positioning example</a>
|
|
|
|
<p>In cases where the dynamically re-positioned "static" toolbar behavior isn't desired, you can simply turn off this feature by adding the <code>data-position="inline"</code> attribute on the header or footer container. This makes the toolbar stay in place in the page flow when the user scrolls, essentially the default HTML behavior.</p>
|
|
|
|
<a href="bars-inline.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inline bar positioning example</a>
|
|
|
|
<p>The third positioning option for bars is a "fullscreen" mode works just like the default <a href="bars-fixed.html">"fixed" toolbar mode</a> except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be 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>
|
|
|
|
<a href="bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreeen bar positioning example</a>
|
|
|
|
<h2>Navbars</h2>
|
|
|
|
<p>A navbar plugin makes it easy to add a horizontal list of links to the header, footer or even main content body of the page. </p>
|
|
|
|
<a href="docs-navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Navbar configuration</a>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |