Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

changed the docs to represent the new auto back button default

Browse source
This commit is contained in:
scottjehl 2011-05-18 18:05:05 -04:00
parent fd0819f379
commit e4336f38ae
3 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
docs/api/themes.html
View file

@ -154,7 +154,7 @@
<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
<div class="swatch-bars">
<div data-role="header" data-theme="a" class="ui-bar" data-backbtn="false">
<div data-role="header" data-theme="a" class="ui-bar" >
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -163,7 +163,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="b" class="ui-bar" data-backbtn="false">
<div data-role="header" data-theme="b" class="ui-bar" >
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -172,7 +172,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="c" class="ui-bar" data-backbtn="false">
<div data-role="header" data-theme="c" class="ui-bar" >
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -181,7 +181,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="d" class="ui-bar" data-backbtn="false">
<div data-role="header" data-theme="d" class="ui-bar" >
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -190,7 +190,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="e" class="ui-bar" data-backbtn="false">
<div data-role="header" data-theme="e" class="ui-bar" >
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>

23
docs/toolbars/docs-headers.html
View file

@ -42,15 +42,17 @@
<h1>Page title</h1>
</div>
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button on every page, to simplify the process of including this common navigation element. To prevent the back button from being added to a header, either add your own button to the left slot (see below) or, add this attribute: <code>data-backbtn="false"</code> to the header container.
<h2>Adding buttons</h2>
<p>In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an <code>anchor</code> element, but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
<h2>Creating custom back buttons</h2>
<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
<h3>Default button positioning</h3>
@ -91,25 +93,32 @@
<h3>Controlling button position with classes</h3>
<p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
<p>In this example, we're adding only a single button to the right slot so the <code>data-backbtn="false"</code> needs to be added to the header container to suppress the automatic Back button behavior and the button needs the <code>ui-btn-right</code> class on the link.</p>
<div class="highlight">
<pre><code>
&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot; data-backbtn=&quot;false&quot;&gt;
&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;
&lt;h1&gt;Page Title&lt;/h1&gt;
&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
<div data-role="header" data-position="inline" data-backbtn="false">
<div data-role="header" data-position="inline" >
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
<h2>Adding Back buttons</h2>
<p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app web view. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p>
<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
<h2>Customizing the back button text</h2>
<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <code>$.mobile.page.prototype.options.backBtnText = "previous";</code>.

2
experiments/converter/index.html
View file

@ -51,7 +51,7 @@
<div data-role="page" id="customize" class="ui-body-b">
<div data-role="header" data-theme="b" data-backbtn="false">
<div data-role="header" data-theme="b">
<h1>Edit conversions</h1>
<a href="#start" data-transition="fade" data-theme="b" data-icon="check" class="ui-btn-right">Done</a>
</div>