javascript - w3schools - scripts jquery mobile 1.4 5 min js

How to add home button using jquery-mobile? (3)

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">
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
    <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.)

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:

Note: This link is only good for firefox/chrome


When first using jqm to develop an application, I wanted both home and back buttons on the top header because the navigation tree is deep. Using the core button classes such as "ui-btn-right" or "ui-btn-left" work great-- IF you only want one button on each side.

But if you are like me and want two buttons on the left, you can use a little custom CSS and positioning to get it where you want. I also wrapped the buttons in a custom-header class, as well as use CSS to control the title in the header. You will need the place each button on a different z-index, otherwise each button will conflict with the other.

This is the header:

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

This is the CSS:


Hope this gives you more options.

<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>

You could use rel=external in you href tag. This will open the homepage without a back button.