jQuery Mobile - Conceptos básicos de la barra de navegación

Descripción

Navbar se puede crear usando el data-role = "navbar"atributo. Cuando se hace clic en un botón de la barra de navegación, obtiene el estado activo. La clase ui-btn-active se eliminará de todos los anclajes de la barra de navegación y se agregará al enlace que está activado.

Si se trata de un enlace a otra página, después de la finalización de la transición, la clase se eliminará nuevamente. Dependiendo de los elementos de la barra de navegación, el ancho del navegador se dividirá uniformemente entre los elementos.

Ejemplo

El siguiente ejemplo demuestra el uso de la barra de navegación básica en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <p>Navbar will be rendered 100% with one item.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
         </ul>
      </div>
      
      <p>Navbar will be rendered 50% with two items.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
            <li><a href = "#">Two</a></li>
         </ul>
      </div>
      
      <p>Each button will take 1/3 width of the browser window when navbar has 3 items.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
            <li><a href = "#">Two</a></li>
            <li><a href = "#">Three</a></li>
         </ul>
      </div>
      
      <p>Each button will take 1/4 width of the browser window when navbar has 4 items.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
            <li><a href = "#">Two</a></li>
            <li><a href = "#">Three</a></li>
            <li><a href = "#">Four</a></li>
         </ul>
      </div>
      
      <p>Each button will take 1/5 width of the browser window when navbar has 5 items.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
            <li><a href = "#">Two</a></li>
            <li><a href = "#">Three</a></li>
            <li><a href = "#">Four</a></li>
            <li><a href = "#">Five</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 navbar_basic.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/navbar_basic.html y se mostrará el siguiente resultado.

↰ Previous page