added nav bar and updated content (now includes a nav bar for options, methods, and events pages)

This commit is contained in:
maggiewachs 2011-09-29 13:03:35 -04:00
parent 3eccc5ba16
commit 108ef2337e
6 changed files with 22 additions and 14 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 &mdash; 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>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
@ -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>

View file

@ -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>