Tabs in Jquery Mobile

The tab is a way to display content from different sections of a page. We have to create documentation for every page in a single page application for menus (on a single webpage). The same code to use multiple times on a single webpage is not good for the perspective of SEO.

The better method can be tabs for SPA (single page applications) menus.

If you don’ t know how to create menus in Jquery mobile. Then first learn to create menus because Major documentation will be similar to nav.

  1. To create tabs, you have to create a DIV container that will have a data-role=”tabs” attribute.
  2. Now, do the documentation for Navbar in the DIV container.
  3. The content that will be displayed after clicking a specific tab, write those content just before closing DIV (having data-role=”tabs”) tag in a DIV tag and give an id to link in an anchor.

Use class=”ui-btn-active” to show a tab active.

Example~

<!DOCTYPE html>
<html>
<head>
  <title>Tabs - Jquery Mobile | Jaischool</title>
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>

  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
    <div data-role="main" class="ui-content">
    
    <!--start tab coding-->

    <div data-role="tabs">
      <!--start navbar coding-->
      <div data-role="navbar" data-grid="b">
        <ul>
          <li><a href="#home" class="ui-btn-active">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#about">Contact</a></li>
        </ul>
      </div>
      <!--end navbar coding-->
      
      <!--start coding for home page-->
        <div id="home"><p>This is homepage.</p></div><!--end-->
      
      <!--start coding for home page-->
        <div id="services"><p>This is services page.</p></div><!--end-->

        <!--start coding for home page-->
        <div id="about"><p>This is about us page.</p></div><!--end-->
    </div>

    <!--end tab coding-->

    </div>
    <div data-role="footer" data-position="fixed"><h2>Footer</h2></div>
  </div>

</body>
</html>

Leave a Comment