jQuery Mobile - Posição dos ícones de Navbars

Descrição

Os ícones da navbar podem ser posicionados no contêiner da navbar em vez de em cada link. Os ícones da barra de navegação podem ser posicionados à esquerda, direita, parte superior ou inferior do texto usandodata-iconpos atributo.

Exemplo

O exemplo a seguir demonstra o uso da posição dos ícones da barra de navegação no 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>

Resultado

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

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

↰ Previous page