JQuery Mobile Latest 03 June 2011 Version - No back button
It's the 3rd June 2011 and I'm using JQuery Mobile's latest version.
My problem is that the back button has gone.
开发者_开发知识库How can I get the back button to show up please?
UPDATE:
I've tried this but still not back button.
<body>
<div data-role="page" data-theme="a" data-iscroll="enable" data-add-back-btn="true">
<div data-role="header" data-theme="a" data-backbtn="true">
<h1>title here</h1>
<a href="index.php" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Home</a>
<a href="view.php" data-icon="arrow-r" data-theme="a" data-iconpos="right">Events</a>
</div><!-- /header -->
<div data-role="content">
If you look at the jQuery mobile blog post in may, the back button is now off by default.
To reenable the back button simply add data-add-back-btn="true" to the page container:
<div data-role="page" id="page1">
<div data-role="header">
<h1>First page</h1>
</div>
<div data-role="content">
<p><a href="#page2">page2</a></p>
</div>
<div data-role="footer">
<h4>Optional footer</h4>
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header">
<h1>Second Page</h1>
</div>
<div data-role="content">
<p><a href="#page1">page1</a></p>
</div>
<div data-role="footer">
<h4>Optional footer</h4>
</div>
</div>
Example of the back button on jsfiddle
If you're still not seeing it and your markup is all correct, Mark's comment is helpful:
assuming you navigated to another page
I wasn't seeing a back button on the page I was testing when adding the attribute:
data-add-back-btn="true"
It was because there was no browser history on that tab of my browser, thus no chance of a back button. If I navigated to the page I was testing from another page, then I would see the back button.
As back button is now turned off by default, you need to turn it on before loading jQuery mobile (and after loading jQuery):
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
Also, to prevent back button's sometimes popping up where it shouldn't be, put this:
data-add-back-btn="false"
to page containers on all pages where you don't want to see back button ever.
include data-add-back-btn="true" in header div tag
<div data-role="page" id="page1">
<div data-role="header">
<h1>First page</h1>
</div>
<div data-role="content">
<p><a href="#page2">page2</a></p>
</div>
<div data-role="footer">
<h4>Optional footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Second Page</h1>
</div>
<div data-role="content">
<p><a href="#page1">page1</a></p>
</div>
<div data-role="footer">
<h4>Optional footer</h4>
</div>
</div>
I had a same problem though I have tried all steps above. I also found issues and solutions.
Issues: Back button is on the left of header and there may be buttons in this position already.
Solution: Move buttons to the right of the header by adding class="ui-btn-right" to buttons
Add this code
<script>
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
BEFORE you define
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
加载中,请稍侯......
精彩评论