Menu
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.
341
Creating a Button in jQuery Mobile Using the <a> element with class="ui-btn"
« Previous. Touch events are triggered when the user touches the screen (page). Tap and/or swipe in this box.
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
There's a simpler solution: just add a link to your header div with class="ui-btn-right". This is essential so that the jQuery Mobile back button can be automatically added to the left. There's also a few other data-* attributes that you can use so you can use the built-in theme icon etc, as shown:
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
<a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
<div data-role="content">
...
(Obviously change the home href URL to something sensible for your environment, don't just use "/" because it limits where your app can be deployed.)
106
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 );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
