How to use navbars as tabs in jQuery mobile
This is the following code I tried on the fiddle Jsfiddle Code
<div data-role="navbar"> <ul> <li><a href="#tab-1">Tab1</a></li> <li><a href="#tab-2">Tab2</a></li> <li><a href="#tab-3">Tab3</a></li> </ul> </div> <div data-role="content"> <div id="tab-1"> <h2>Here is the first tab</h2> </div> <div id="tab-2"> <h2>Here is the second tab</h2> </div> <div id="tab-3"> <h2>Here is the third tab</h2> </div> </div> - I need to show the first tab and its contents by default.
- I need to hide the contents of another tab when one specific tab is displayed.
How to do it?
+4
4 answers
Here is an example of code that uses navbars as tabs.
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script> var prevSelection = "tab1"; $("#navbar ul li").live("click",function(){ var newSelection = $(this).children("a").attr("data-tab-class"); $("."+prevSelection).addClass("ui-screen-hidden"); $("."+newSelection).removeClass("ui-screen-hidden"); prevSelection = newSelection; }); </script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <style> .tab-content{ width:100%; height:250px; background-color:white; border-bottom-left-radius:0.5em; border-bottom-right-radius:0.5em; } .tab-content>div{ padding:5px; } </style> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <div data-role="navbar" id="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Tab1</a></li> <li><a href="#" data-tab-class="tab2">Tab2</a></li> <li><a href="#" data-tab-class="tab3">Tab3</a></li> <li><a href="#" data-tab-class="tab4">Tab4</a></li> </ul> </div> <div class="tab-content"> <div class="tab1"> Tab1 </div> <div class="tab2 ui-screen-hidden"> Tab2 </div> <div class="tab3 ui-screen-hidden"> Tab3 </div> <div class="tab4 ui-screen-hidden"> Tab4 </div> </div> </div><!-- /content --> </div><!-- /page --> </body> </html> Demo - http://jsfiddle.net/m8wQM/
Let me know if this helps.
+6
Try it,
<div data-role="navbar"> <ul> <li><a href="#tab-1" onclick="ShowHide(this)">Tab1</a></li> <li><a href="#tab-2" onclick="ShowHide(this)">Tab2</a></li> <li><a href="#tab-3" onclick="ShowHide(this)">Tab3</a></li> </ul> </div> <div data-role="content" class="content"> <div id="tab-1" class="tab"> <h2>Here is the first tab</h2> </div> <div id="tab-2" class="tab"> <h2>Here is the second tab</h2> </div> <div id="tab-3" class="tab"> <h2>Here is the third tab</h2> </div> </div> $(function() { $(".tab").hide(); $(".content").find("div:first").show(); }); function ShowHide(e) { $(".tab").hide(); var id =$(e).attr("href"); $(id).show(); } +2
Include the navigation bar in the title. sort of
<div data-role="header" > <h1>Title</h1> <div data-role="navbar" id="mk_item_actions"> <ul> <li><a href="#tab-1">Tab1</a></li> <li><a href="#tab-2">Tab2</a></li> <li><a href="#tab-3">Tab3</a></li> </ul> </div> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> Then it will work as it wants. But you still have to handle hiding and showing the contents of the div tab. There is no other way.
0