CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user700284
user700284

Reputation: 13620

Specifying the styles for the selected tab in a navbar

I have the following html code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="d">
                <div data-role="navbar" data-theme="d">
                    <ul>
                        <li><a href="#" data-icon="custom" class="ui-btn-active">Home</a></li>
                        <li><a href="#" data-icon="grid">Second page</a></li>
                        <li><a href="#" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>

        </div>

    </body>
</html>

What I want to achieve is to set some styles for the currently active tab in the navbar and change the icon and background for the selected tab(icon will be different for different tabs).

Using this CSS I can target the active tab

.ui-btn-active{
    background:red !important;
}

But I want to target each tabs separately because I need separate selected icons for each tab(Or lets say,for ease of illustration purpose-I need a different active tab color for each tab:red for first,blue for second,green for third)

You can see it here - http://jsfiddle.net/8pwFK/

Please let me know how to achieve this.Thanks in advance

Edit:The real challenge I am facing is setting a selected state for my custom icon.This is the CSS I use for the custom icon:

.tab1 .ui-icon { background:  url(icon1.png) 50% 50% no-repeat; background-size: 30px 30px; }

I think I need to somehow connect .ui-btn-active and .ui-icon for this to work.But I am not able to figure out how.

Upvotes: 3

Views: 10513

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85308

Add a id to each element you want to style like so with css:

Live Example:

HTML:

<li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li>
<li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li>
<li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>

CSS:

#custom-li-1.ui-btn-active {
    background:green !important;
}

#custom-li-2.ui-btn-active {
    background:red !important;
}

#custom-li-3.ui-btn-active {
    background:blue !important;
}

Docs for Custom Icons:

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

and

Using 3rd party icon sets

You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:

Related Links:

UPDATE:

Here is the what I think you're looking for:

JS:

$('#custom-li-1').click(function() {
    $(this).attr('data-icon','star');
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();

$('#custom-li-2').click(function() {
    $(this).attr('data-icon','home');
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();

$('#custom-li-3').click(function() {
    $(this).attr('data-icon','grid');
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();

Upvotes: 2

Guest
Guest

Reputation: 76

Combine css classes.

HTML:

<li><a href="#" data-icon="custom" class="home ui-btn-active">Home</a></li>
<li><a href="#" data-icon="grid" class="two">Second page</a></li>
<li><a href="#" data-icon="star" class="three">Third page</a></li>

CSS:

.home.ui-btn-active {
    background:red !important;
}
.two.ui-btn-active {
    background:green !important;
}
.three.ui-btn-active {
    background:blue !important;
}

Updated Fiddle:

http://jsfiddle.net/8pwFK/3/

Upvotes: 2

Related Questions