Reputation: 1574
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
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
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