Incorporating mariozaizar's changes to add a backBtnTheme option (null by default) to the page plugin. A few edits were needed to support namespacing and a proper null default so theme inheritance is the default.

This commit is contained in:
scottjehl 2011-03-27 18:29:45 -04:00
parent b0eb2bd053
commit 4f4718731f
2 changed files with 11 additions and 4 deletions

View file

@ -112,10 +112,11 @@
<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>. If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
<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>.
<h3>Default back button style</h3>
<p>If you'd like to configure the back button role-theme, you can use: <code>$.mobile.page.prototype.options.backBtnTheme = "a";</code>.
If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
<h2>Custom header configurations</h2>
<p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> 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.</p>

View file

@ -10,6 +10,7 @@ $.widget( "mobile.page", $.mobile.widget, {
options: {
backBtnText: "Back",
addBackBtn: true,
backBtnTheme: null,
degradeInputs: {
color: false,
date: false,
@ -79,7 +80,12 @@ $.widget( "mobile.page", $.mobile.widget, {
$elem.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
!leftbtn && $this.jqmData( "backbtn" ) !== false ) {
$( "<a href='#' class='ui-btn-left' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
var backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
//if theme is provided, override default inheritance
if( o.backBtnTheme ){
backBtn.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme );
}
}
//page title