mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-17 02:51:07 +00:00
Added full icon positioning docs and examples and re-vamped the headers docs to include a navbar doc page with glyphish example.
This commit is contained in:
Todd Parker
parent
8e616aaa8e
commit
66d53461b0
7 changed files with 255 additions and 14 deletions
|
|
@ -71,23 +71,32 @@
|
|||
|
||||
|
||||
<h2>Icon positioning</h2>
|
||||
<p>By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the <code>data-iconpos</code> attribute. For example, the markup:</p>
|
||||
<p>By default, all icons in buttons are placed to the left of the button text. </p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
|
||||
|
||||
<p>This default may be overridden using the <code>data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this button with right-aligned icon:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
|
||||
<p>Creates this button with right-aligned icon:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
|
||||
|
||||
<p>Icons can also be positioned above the text by specifying <code>data-iconpos="top"</code></p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
|
||||
|
||||
<p>Or icons can also be positioned below the text by specifying <code>data-iconpos="bottom"</code></p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
|
||||
|
||||
<p>You can also create an icon-only button, by setting the <code>data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code>data-iconpos="right"</code> on the previous example with <code>data-iconpos="notext"</code>:</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this icon-only button:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
||||
<p>Creates this icon-only button:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
||||
|
||||
<h2>Custom Icons</h2>
|
||||
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
|
||||
</div><!-- /grid-a -->
|
||||
</div><!-- /grid-b -->
|
||||
|
||||
<p>And an example of a 3 column grid with buttons inside:</p>
|
||||
|
||||
|
|
@ -94,7 +94,44 @@
|
|||
<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<h2>Four-column grids</h2>
|
||||
|
||||
<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block.</p>
|
||||
|
||||
<div class="ui-grid-c">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
|
||||
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
|
||||
</div><!-- /grid-c -->
|
||||
|
||||
<h2>Five-column grids</h2>
|
||||
<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block.</p>
|
||||
|
||||
<div class="ui-grid-d">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
|
||||
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
|
||||
<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
|
||||
</div><!-- /grid-c -->
|
||||
|
||||
<h2>Multiple row grids</h2>
|
||||
|
||||
<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
|
||||
|
||||
<div class="ui-grid-b">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
|
||||
</div><!-- /grid-c -->
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
|
||||
</ul>
|
||||
|
||||
<p>It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a <a href="footer-persist-a.html"><strong>nav bar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
|
||||
<p>It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>nav bar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
|
||||
|
||||
|
||||
<h2>Toolbar positioning options</h2>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,12 @@
|
|||
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Header bars</h1>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</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 to the the left and/or right of the title for navigation or actions.</p>
|
||||
<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 to the the left and/or right of the title for navigation or actions.</p>
|
||||
|
||||
<p>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>
|
||||
|
||||
|
|
@ -105,7 +104,7 @@
|
|||
</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. </p>
|
||||
<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 so you can write custom styles for laying out the content in your header.</p>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
|
|
|
|||
184
docs/toolbars/docs-navbar.html
Executable file
184
docs/toolbars/docs-navbar.html
Executable file
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>jQuery Mobile Docs - Toolbars</title>
|
||||
<link rel="stylesheet" href="../../themes/default" />
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Navbar</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Simple navbar</h2>
|
||||
|
||||
<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar , typically within a header or footer. </p>
|
||||
|
||||
<p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code>data-role="navbar"</code> attribute. To set one of links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
</code></pre>
|
||||
|
||||
<p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html"class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
<li><a href="c.html">Three</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
<li><a href="c.html">Three</a></li>
|
||||
<li><a href="d.html">Four</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
<li><a href="c.html">Three</a></li>
|
||||
<li><a href="d.html">Four</a></li>
|
||||
<li><a href="e.html">Five</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>If more than 5 items are added, the navbar will simply wrap to multiple lines:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
<li><a href="c.html">Three</a></li>
|
||||
<li><a href="d.html">Four</a></li>
|
||||
<li><a href="e.html">Five</a></li>
|
||||
<li><a href="f.html">Six</a></li>
|
||||
<li><a href="g.html">Seven</a></li>
|
||||
<li><a href="h.html">Eight</a></li>
|
||||
<li><a href="i.html">Nine</a></li>
|
||||
<li><a href="j.html">Ten</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<h2>Icons in navbars</h2>
|
||||
|
||||
<p>Icons can be added to navbar items by adding the <code>data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" data-icon="grid">Summary</a></li>
|
||||
<li><a href="b.html" data-icon="star" class="ui-btn-active">Favs</a></li>
|
||||
<li><a href="c.html" data-icon="gear">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>Icons can be stacked above the labels by adding the <code>data-iconpos="top"</code> attribute to each anchor.</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" data-icon="grid" data-iconpos="top">Summary</a></li>
|
||||
<li><a href="b.html" data-icon="star" class="ui-btn-active" data-iconpos="top">Favs</a></li>
|
||||
<li><a href="c.html" data-icon="gear" data-iconpos="top">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<h2>Using 3rd party icon sets</h2>
|
||||
|
||||
<p>You can add any of the popular icon libraries like <a href="http://glyphish.com/">Glyphish</a> to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:</p>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
|
||||
.ui-navbar-expanded ul .ui-btn .ui-btn-inner { padding-top: 55px !important; }
|
||||
.nav-glyphish-example .ui-btn .ui-icon, .ui-navbar-expanded ul .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
|
||||
.ui-navbar-expanded ul .ui-btn .ui-icon { top: 20px; }
|
||||
#chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; }
|
||||
#email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; }
|
||||
.nav-glyphish-example .ui-navbar-toggle .ui-icon { background: url(glyphish-icons/19-gear.png) 50% 50% no-repeat !important; }
|
||||
#login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; }
|
||||
#beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; }
|
||||
#coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; }
|
||||
#skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; }
|
||||
</style>
|
||||
|
||||
<div data-role="footer" class="nav-glyphish-example">
|
||||
<div data-role="navbar" class="nav-glyphish-example">
|
||||
<ul>
|
||||
<li><a href="a.html" id="chat" data-icon="custom">Chat</a></li>
|
||||
<li><a href="b.html" id="email" data-icon="custom">Email</a></li>
|
||||
<li><a href="c.html" id="skull" data-icon="custom">Danger</a></li>
|
||||
<li><a href="d.html" id="beer" data-icon="custom">Beer</a></li>
|
||||
<li><a href="e.html" id="coffee" data-icon="custom">Coffee</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Icons by Joseph Wain / <a href="http://glyphish.com/">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>
|
||||
|
||||
|
||||
<h2>Theming navbars</h2>
|
||||
|
||||
<p>Navbars can be set to any theme color by <code>data-theme</code> attribute to the links and specifying any theme swatch.</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar" data-theme="e">
|
||||
<ul>
|
||||
<li><a href="a.html" data-icon="grid" data-iconpos="top" data-theme="e">Summary</a></li>
|
||||
<li><a href="b.html" data-icon="star" class="ui-btn-active" data-iconpos="top" data-theme="e">Favs</a></li>
|
||||
<li><a href="c.html" data-icon="gear" data-iconpos="top" data-theme="e">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
<li><a href="docs-bars.html">Toolbar basics</a></li>
|
||||
<li><a href="docs-headers.html">Header bars</a></li>
|
||||
<li><a href="docs-footers.html">Footer bars</a></li>
|
||||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,23 @@
|
|||
* Copyright (c) jQuery Project
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/* content configurations. */
|
||||
.ui-grid-a, .ui-grid-b, .ui-grid-c { overflow: hidden; }
|
||||
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d { margin: 0; padding: 0; border: 0; float: left; }
|
||||
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
|
||||
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; }
|
||||
|
||||
/* grid a: 50/50 */
|
||||
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
|
||||
.ui-grid-a .ui-block-a { clear: left; }
|
||||
|
||||
/* grid b: 33/33/33 */
|
||||
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.333%; }
|
||||
.ui-grid-b .ui-block-a { clear: left; }
|
||||
.ui-grid-b .ui-block-a { clear: left; }
|
||||
|
||||
/* grid c: 25/25/25/25 */
|
||||
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 25%; }
|
||||
.ui-grid-c .ui-block-a { clear: left; }
|
||||
|
||||
/* grid d: 20/20/20/20/20 */
|
||||
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; }
|
||||
.ui-grid-d .ui-block-a { clear: left; }
|
||||
Loading…
Reference in a new issue