jQuery Mobile: botones en las barras de herramientas

Descripción

Los enlaces en las barras de herramientas serán mejorados automáticamente por el marco como botones con estilo mini e integrado; sin embargo, ha quedado obsoleto en la versión 1.4.
Lo mismo se aplica para colocar los botones en el encabezado si son hijos del encabezado inmediato.
Para colocar sus botones hacia la izquierda o hacia la derecha en el encabezado, puede usar ui-btn-left y ui-btn-right respectivamente.
El encabezado tiene un margen que proporciona a la barra de encabezado su altura. Si no necesita el encabezado de su página, agregue un elemento con class = "ui-title" .

Ejemplo

El siguiente ejemplo demuestra el uso de botones en barras de herramientas en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Buttons in toolbars</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 = "header">
         <a href = "#" class = "ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Options</a>
         <button class = "ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
         <span class = "ui-title"></span>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como toolbar_buttons.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_buttons.html y se mostrará el siguiente resultado.

Los botones también se pueden utilizar en pies de página. Para más información haga clic aquí .

↰ Previous page