This commit is contained in:
Kin Blas 2011-01-11 09:04:32 -08:00
commit 8050fb0d01
4 changed files with 11 additions and 11 deletions

View file

@ -151,7 +151,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-nobackbtn="true">
<div data-role="header" data-theme="a" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
@ -160,7 +160,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="b" class="ui-bar" data-nobackbtn="true">
<div data-role="header" data-theme="b" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
@ -169,7 +169,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="c" class="ui-bar" data-nobackbtn="true">
<div data-role="header" data-theme="c" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
@ -178,7 +178,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="d" class="ui-bar" data-nobackbtn="true">
<div data-role="header" data-theme="d" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
@ -187,7 +187,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="e" class="ui-bar" data-nobackbtn="true">
<div data-role="header" data-theme="e" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>

View file

@ -39,7 +39,7 @@
<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-nobackbtn="true"</code> to the header container.
<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>
@ -86,20 +86,20 @@
<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-nobackbtn="true"</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>
<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-nobackbtn=&quot;true&quot;&gt;
&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot; data-backbtn=&quot;false&quot;&gt;
&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-nobackbtn="true">
<div data-role="header" data-position="inline" data-backbtn="false">
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

View file

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

View file

@ -76,7 +76,7 @@ $.widget( "mobile.page", $.mobile.widget, {
// auto-add back btn on pages beyond first view
if ( o.addBackBtn && role === "header" &&
($.mobile.urlStack.length > 1 || $(".ui-page").length > 1) &&
!leftbtn && !$this.data( "noBackBtn" ) ) {
!leftbtn && $this.data( "backBtn" ) === false ) {
$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
.click(function() {