jQuery Mobile: utilizza la barra di navigazione per le schede

Descrizione

Per utilizzare la barra di navigazione per le tue schede, puoi dichiarare la barra di navigazione all'interno delle tue schede.

Esempio

L'esempio seguente mostra l'uso della barra di navigazione per le schede in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come tabs_navbars.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/tabs_navbars.html e verrà visualizzato il seguente output.