mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-18 21:30:59 +00:00
added nav bar and updated content (now includes a nav bar for options, methods, and events pages)
This commit is contained in:
parent
3eccc5ba16
commit
108ef2337e
6 changed files with 22 additions and 14 deletions
|
|
@ -75,7 +75,7 @@
|
|||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Buttons</li>
|
||||
<li><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li><a href="buttons-types.html">Button basics</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Buttons</li>
|
||||
<li><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li><a href="buttons-types.html">Button basics</a></li>
|
||||
<li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Buttons</li>
|
||||
<li><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li><a href="buttons-types.html">Button basics</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Buttons</li>
|
||||
<li><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li><a href="buttons-types.html">Button basics</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
|
|
|
|||
|
|
@ -16,18 +16,28 @@
|
|||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Button markup options</h1>
|
||||
<h1>Button basics</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements — each will be styled identically by the framework.</p>
|
||||
|
||||
<h2>Button basics</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
|
||||
<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
|
||||
<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
||||
<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
|
||||
|
||||
<h2>Styling links as buttons</h2>
|
||||
|
||||
<p>In the main content block of a page, you can style any anchor link as a button by adding the <code> data-role="button"</code> to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: </p>
|
||||
<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button">Link button</a>
|
||||
|
|
@ -64,15 +74,13 @@
|
|||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
<li data-role="list-divider">Buttons</li>
|
||||
<li data-theme="a"><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
<li><a href="buttons-themes.html">Theming buttons</a></li>
|
||||
|
||||
<li><a href="buttons-themes.html">Theming buttons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="buttons-types.html">Button markup options</a></li>
|
||||
<li><a href="buttons-types.html">Button basics</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue