jQuery Mobile: barras de navegación con elementos de botón

Descripción

En lugar de usar enlaces dentro de la barra de navegación, también puede usar elementos de botón.

Ejemplo

El siguiente ejemplo demuestra el uso de la barra de navegación con botón en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Navbars with button elements</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>
   </head>

   <body>
      <div data-role = "navbar" data-iconpos = "left">
         <ul>
            <li><button data-icon = "star">Button One</button></li>
            <li><button data-icon = "arrow-l" data-theme = "b">Button Two</button></li>
            <li><button data-icon = "arrow-r">Button Three</button></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_with_button.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/navbar_with_button.html y se mostrará el siguiente resultado.

↰ Previous page