jQuery Mobile - Use a barra de navegação para guias

Descrição

Para usar a barra de navegação em suas guias, você pode declarar a barra de navegação dentro de suas guias.

Exemplo

O exemplo a seguir demonstra o uso de navbar para guias no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como tabs_navbars.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/tabs_navbars.html e a seguinte saída será exibida.

↰ Previous page