jQuery Mobile - Use navbar for tabs

Description

To use navbar for your tabs, you can declare the navbar inside your tabs.

Example

Following example demonstrates the use of navbar for tabs in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Use navbar for tabs</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://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 the above code works −

  • Save the above html code as tabs_navbars.html file in your server root folder.

  • Open this HTML file as http://localhost/tabs_navbars.html and the following output will be displayed.

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements