By default jquery-mobile adds a back button on each page after main page. I wish to know how can I add the home button also ?
Here is an example: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
Note: This link is only good for firefox/chrome
Thanks.
Without modifying the jquery-mobile.js source code, the only way I can think to do it, is to add your own navigation links to the header. Once you add your own link, the automatic 'Back' button will disappear, so we will create 2 links, one for back, and one for home.
You will notice page 2 and 3 both have back buttons and a home button and you can either go back or jump directly to home. This requires you to modify the 'header' section for each page, but its not that big of a deal since its always the same (copy and paste) no modification needed per instance.
The 'home' link will be in the top right (as per the default behavior of a second link it to put it top right).
Here is the example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=stylesheet href=http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css />
<script src=http://code.jquery.com/jquery-1.4.3.min.js></script>
<script src=http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js></script>
</head>
<body>
<div data-role=page id=firstpage>
<div data-role=header>
<h1>First Page</h1>
</div>
<div data-role=content>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href=#secondpage>second page</a></p>
</div>
<div data-role=footer>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=page id=secondpage>
<div data-role=header>
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick=history.back(); return false>Back</a><h1>Bar</h1><a href=#firstpage>home</a>
</div>
<div data-role=content>
<p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
<p><a href=#thirdpage>Go to third page</a></p>
</div>
<div data-role=footer>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=page id=thirdpage>
<div data-role=header>
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick=history.back(); return false>Back</a><h1>Bar</h1><a href=#firstpage>home</a>
</div>
<div data-role=content>
<p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p>
</div>
<div data-role=footer>
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
If you wanted to make it do it automatically, you could also just hack the js...
Right after this piece of code (around line 1084 of the non minified jquery.mobile-1.0a2.js)
$( <a href='#' class='ui-btn-left' data-icon='arrow-l'>+ o.backBtnText +</a> )
.click(function() {
history.back();
return false;
})
.prependTo( $this );
Add a line like this, where #firstpage is the id of your home page, I couldn't find a way to reference the home page without calling it by name, feel free to improve.. I didn't want to do / or just # won't work... but this method works
$( <a href='#firstpage' class='ui tn-right'>Home</a> ).appendTo( $this );
