Cuadrícula de menú en jQuery Mobile

Question

¿Cuál es la mejor manera de implementar este diseño con jQuery Mobile (menú-grid, 6 botones en este ejemplo)?

He intentado la cuadrícula de jQuery Mobile, pero tuve muchos problemas, como por ejemplo hacerlo de ancho completo y de altura completa, y cambiar el color a lo que quiera.

Answer 1

Puede crear que en su propio estilo para esa página. Flote los iconos y déles un 50% de ancho (o menos si está usando bordes con el modelo de caja)

Answer 2

Como no tiene mucho que hacer y requiere un cuerpo aquí, creo que el camino de navegación del encabezado podría ser Lo más fácil. Simplemente coloque el siguiente código justo después del encabezado de su página. Por ejemplo:

<div data-role='header' data-position='inline' role='banner' data-theme='f' > 

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1> 

    <div data-role="navbar" data-theme='c'> 
     <ul> 
      <li><a href="" > 
       Camera 
      </a></li> 

      <li><a href="" > 
       Wave 
      </a></li> 

      <li><a href="" > 
       Lock 
      </a></li> 


      <li><a href="" > 
       Pencil 
      </a></li> 


      <li><a href="" > 
       Star 
      </a></li> 


      <li><a href="" > 
       Friends 
      </a></li> 

     </ul> 
    </div><!-- /navbar --> 
</div><!-- header --> 

Puesto que usted tiene seis artículos aquí, jQuery Mobile automágicamente se alinearán en forma de cuadrícula 2x3 como se muestra en su maqueta (al menos se hará cargo de la anchura). Aparte de esto, tu mejor apuesta para la altura podría ser hacer algo de aritmética en CSS. Ejemplo: si la barra del encabezado es 12px, entonces configure la altura de cada bloque: 33% -4px;

Para la configuración del color y tal, jquery mobile theme roller funciona mucho mejor que hacer css hechos a mano.

Answer 3

rejilla Utilizar los datos "a"

Utilizar el siguiente uno

<div data-role="navbar" data-grid="a">