jQuery Mobile: use la barra de navegación para las pestañas

Descripción

Para usar la barra de navegación para sus pestañas, puede declarar la barra de navegación dentro de sus pestañas.

Ejemplo

El siguiente ejemplo demuestra el uso de la barra de navegación para pestañas en 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 = "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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como tabs_navbars.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/tabs_navbars.html y se mostrará el siguiente resultado.

↰ Previous page