mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-24 09:50:26 +00:00
85 lines
No EOL
2.9 KiB
HTML
Executable file
85 lines
No EOL
2.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Framework - navbar Example</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>Navbar Example</h1>
|
|
|
|
<div data-role="navbar">
|
|
<ul>
|
|
<li><a href="bars-fixed.html">Fixed</a></li>
|
|
<li><a href="bars-inline.html">Inline</a></li>
|
|
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<h1>Nav bar widget</h1>
|
|
|
|
|
|
<p>The Nav Bar widget can be added anywhere in a page — header, content, or footer region — to provide a navigation bar that accommodates an unlimited number of options in a compact layout.</p>
|
|
|
|
<p>The Nav Bar is structured as a 3-column element; it displays up to 3 items per row in a horizontal bar with out without icons. (If more than 3 items are in the navigation list, the nav bar displays a second row with option slots.) </p>
|
|
|
|
<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar"</code> attribute to the list.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="navbar">
|
|
<ul>
|
|
<li><a href="bars-fixed.html">Fixed</a></li>
|
|
<li><a href="bars-inline.html">Inline</a></li>
|
|
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
|
|
<li><a href="bars-persist.html">Persistent</a></li>
|
|
<li><a href="bars-themes.html">Themes</a></li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</pre></code>
|
|
|
|
<p>The markup above creates a two-row nav bar element in the body of the page, like this:</p>
|
|
|
|
|
|
<div data-role="navbar">
|
|
<ul>
|
|
<li><a href="index.html">Toolbar basics</a></li>
|
|
<li><a href="bars-fixed.html">Fixed</a></li>
|
|
<li><a href="bars-inline.html">Inline</a></li>
|
|
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
|
|
<li><a href="bars-persist.html">Persistent</a></li>
|
|
<li><a href="bars-themes.html">Themes</a></li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
|
|
|
|
<p>The navbar can be added inside the header or footer bar; if you want it to persist, simply add a <code>data-position="fixed"</code> attribute to the header or footer <code>div</code> container.</p>
|
|
|
|
|
|
|
|
</div><!-- /content-->
|
|
|
|
<div data-role="footer">
|
|
<div data-role="navbar">
|
|
<ul>
|
|
<li><a href="bars-fixed.html">Fixed</a></li>
|
|
<li><a href="bars-inline.html">Inline</a></li>
|
|
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</div><!-- /footer -->
|
|
|
|
|
|
|
|
</div><!-- /page -->
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |