By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute. For example, the markup:
By default, all icons in buttons are placed to the left of the button text.
+ Delete + +This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
-Creates this button with right-aligned icon:
-Delete +Creates this button with right-aligned icon:
+ Delete +Icons can also be positioned above the text by specifying data-iconpos="top"
Or icons can also be positioned below the text by specifying data-iconpos="bottom"
You can also create an icon-only button, by setting the data-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing data-iconpos="right" on the previous example with data-iconpos="notext":
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
-Creates this icon-only button:
-Delete +Creates this icon-only button:
+ DeleteTo use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email 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.
And an example of a 3 column grid with buttons inside:
@@ -94,7 +94,44 @@ - +A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block.
A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fourth block.
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 class=ui-block-a 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:
It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a nav bar widget that turns an unordered list of links into a horizontal button bar, which works well in these instances.
+It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a nav bar widget that turns an unordered list of links into a horizontal button bar, which works well in these instances.
The header 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.
The header 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.
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.
@@ -105,7 +104,7 @@If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container div inside the header container and the plugin won't apply the automatic button logic at all.
If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container div 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.
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.
+ +A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:
+<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 -->
+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:
+ + + +Adding a third item will automatically make each button 1/3 the width of the browser window:
+ + + +Adding a fourth more item will automatically make each button 1/4 the width of the browser window:
+ + + +The navbar maxes out with 5 items, each 1/5 the width of the browser window:
+ + + +If more than 5 items are added, the navbar will simply wrap to multiple lines:
+ + + +Icons can be added to navbar items by adding the data-icon attribute specifying a standard mobile icon to each anchor.
Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor.
You can add any of the popular icon libraries like Glyphish 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:
+ + + + + + +Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.
+ + +Navbars can be set to any theme color by data-theme attribute to the links and specifying any theme swatch.