Jquery Mobile Back Buttons

问题

I have an application in which I am programmatically add a back button to the page. This means that the first page will not have a back button on it. However the app itself has many ways of entering the app, in other words I can get a notification and in touching that notification it goes to a particular area in the app. This area will not have a backbutton to go to the homepage, and if I add one manually it will conflict with the programmed back button.

So I am looking for a way to add a button to go back to the homepage only when the page is loaded first and other times when you visit the page the back button performs as expected.

回答1:

I assume that you're using data-add-back-btn=true to dynamically add data-rel=back buttons to your pages. Hence, it is possible by first, checking if there is no data-rel=back in the active page and secondly, it is not your Home page.

One more thing, you need to remove that button once you navigate away from that page in order not to overlap with the one that JQM will generate.

Demo

var backbtn = '<a href="#home" data-icon="arrow-l" data-iconpos="notext" class="backbtn"></a>';

$(document).on('pagebeforeshow', function () {
 var activePage = $.mobile.activePage;
 if (activePage.find('[data-rel=back]').length === 0 && activePage[0].id != 'home') {
  activePage.find('[data-role=header] h1').before(backbtn);
 }
 $('[data-role=page]').trigger('pagecreate');
 $(document).on('pagebeforehide', function () {
  $('a.backbtn').remove();
 });
});

来源：https://stackoverflow.com/questions/16374046/jquery-mobile-back-buttons