jQuery Mobile - Posición de los iconos de las barras de navegación

Descripción

Los iconos de la barra de navegación se pueden colocar en el contenedor de la barra de navegación en lugar de en cada enlace. Los iconos de la barra de navegación se pueden colocar a la izquierda, derecha, arriba o abajo del texto usandodata-iconpos atributo.

Ejemplo

El siguiente ejemplo demuestra el uso de la posición de los iconos de la barra de navegación en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Navbar Icons Position</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>
      <p>Icons placed at bottom:</p>
      <div data-role = "navbar" data-iconpos = "bottom">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at top:</p>
      <div data-role = "navbar" data-iconpos = "top">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at left:</p>
      <div data-role = "navbar" data-iconpos = "left">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at right:</p>
      <div data-role = "navbar" data-iconpos = "right">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</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_icons_position.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/navbar_icons_position.html y se mostrará el siguiente resultado.

↰ Previous page