Use navbar for tabs
Advertisements
Description
To use navbar for your tabs, you can declare navbar inside your tabs.
Example
The below example demonstrates the use of navbar for tabs in jQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<title>Use navbar for tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.tablist-left {width: 25%; display: inline-block; }
.tablist-content {width: 60%; display: inline-block; vertical-align: top; margin-left: 5%; }
</style>
</head>
<body>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">Tab one</a></li>
<li><a href="#two" data-ajax="false">Tab two</a></li>
<li><a href="/jquery_mobile/src/tabs_navbars2.html" data-ajax="false">Tab three</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>This is first tab contents.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Audi</a></li>
<li><a href="#">Hyundai</a></li>
<li><a href="#">Honda</a></li>
</ul>
</div>
</div>
<h2>Use inset listview for tabs</h2>
<div data-role="tabs">
<ul data-role="listview" data-inset="true" class="tablist-left">
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
<li><a href="tabs_navbars2.html" data-ajax="false">three</a></li>
</ul>
<div id="one" class="ui-body-d tablist-content">
<h1>First tab contents</h1>
</div>
<ul id="two" class="tablist-content" data-role="listview" data-inset="true">
<li><a href="#">Audi</a></li>
<li><a href="#">Hyundai</a></li>
<li><a href="#">Honda</a></li>
</ul>
</div>
</body>
</html>
Output
Let's carry out the following steps to see how above code works:
Save above html code as tabs_navbars.html file in your server root folder.
Open this HTML file as http://localhost/tabs_navbars.html and output as below gets displayed.