Header Back Button

Description

jQuery Mobile offers us the choice of automatically enabling or disabling back button globally.

We also have the option of adding or removing them on a page-by-page basis.

The back button is disabled by default within jQuery Mobile.

If you need the back button to appear within the header you have several options for adding them:

• You can add the back button to a specific page by adding data-auto-back-btn="true" on the page container.
• You can globally enable the back button by setting the addBackBtn option to true when binding to the mobileinit option.

Under the covers, a back button simply executes window.history.back().

We may also override the default back button text and theme.

The data-back-btn-text attribute can be used for this convention.

<!-- Show the back  button and  override the default  back  button text  -->
<div   data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">

To globally enable the back button, set the default back button text, and set back button theme.

$(document).bind('mobileinit',function(){
    $.mobile.page.prototype.options.addBackBtn  = true;
    $.mobile.page.prototype.options.backBtnText  = "Previous";
    $.mobile.page.prototype.options.backBtnTheme  = "b";
});

If you enabled the back button globally, you can choose to disable the back button on specific pages by adding the data-add-back-btn="false" attribute on the page header.

This will remove the back button from the header of specific pages.

<!--  Disable the back  button on  a  specific page  if we globally  enabled it -->
<div   data-role="header" data-add-back-btn="false">

Back Linking

If you want to create a button that behaves similarly to a back button you can add data-rel="back" to any anchor element:

With data-rel="back", the link will mimic the back button, going back one history entry (window.history.back()) and ignoring the link's default href.

For C-Grade browsers or browsers with no JavaScript support the data-rel will be ignored and the href attribute will be used as a fallback.