CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Shruti
Shruti

Reputation: 1574

How to make tab bar in jQuery mobile?

I take a tab bar from one of my project and put it on jsfiddle, but there is too much CSS it is impossible to understand so I take useful code from the CSS and made my own fiddle here but it is 100% similar to example. But I need to make same tab bar in my jQuery mobile example.

I used data-role ="navbar"

Here is my final demo In which I need to add this upper tab bar instead of button

<div data-role="navbar">
  <ul>
    <li><a href="#" class="tabBtn" data-tabid="0">One</a></li>
    <li><a href="#" class="tabBtn" data-tabid="1">Two</a></li>
    <li><a href="#" class="tabBtn" data-tabid="2">Three</a></li>
  </ul>
</div>

How to make tab bar same as in above fiddles?

http://jsfiddle.net/ezanker/o9foej5L/1/

Upvotes: 0

Views: 1082

Answers (2)

ezanker
ezanker

Reputation: 24738

Demo first, then explanation:

Updated FIDDLE

I added a class to the navbar:

<div data-role="navbar" class="myNavBar">

Then the following CSS does the trick:

.myNavBar  {
    border-bottom: 1px solid #fb7923;
}
.myNavBar a {
    border-width: 0px !important;  
}
.myNavBar a.ui-btn-active {
    background-color: rgb(246, 246, 246) !important;   
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    color: #fb7923 !important;
    padding-bottom: 6.75px;
    text-shadow: none !important;
    box-shadow: none  !important;
}
.myNavBar a:hover {
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    padding-bottom: 6.75px;
}

The first one sets the bottom border of the whole navbar to orange. The second one gets rid of all the button borders. The ui-btn-active override sets the text orange, created a thicker bottom border and adjusts the padding to keep the button the same height as the others. I also tweaked the hover state.

You should tweak these settings to get what you want.

Upvotes: 0

HaBo
HaBo

Reputation: 14327

Just add this css

.ui-btn-active{
 border-bottom: 3px solid #c30 !important;
}

http://jsfiddle.net/o9foej5L/3/

You need to take help of JavaScript

   $(".tabBtn").on("click", function(){
         $(".tabBtn").removeClass("activeWI");
        $(this).addClass("activeWI");
    });

Changes to your HTML

<header>
    <div class="topbarWI">
        <div class="midbox">
            <div class="main-menu">
                <a runat="server" href="#" id="logoutRg" class="tabBtn fl activeWI">Tab1</a>
                <a runat="server" href="#" id="faqbtnRg" class="tabBtn fright">Tab3</a>
                <a runat="server" href="#" id="newregistrationRg" class="tabBtn mid-link">Tab2</a>
            </div>
        </div>
    </div>
</header>

JS Fildle: http://jsfiddle.net/h7Lasuoh/1/

Upvotes: 1

Related Questions