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">
        <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.)

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.


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:

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

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>
        </div>
    </div>

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





jquery-mobile