Menu Grid in jQuery Mobile

Question

Qual è il modo migliore per implementare questo layout con jQuery Mobile (menu-griglia, 6 pulsanti in questo esempio)?

Ho provato la griglia di jQuery Mobile ma ho avuto molti problemi come renderlo a tutta larghezza e altezza completa e cambiare il colore in qualsiasi cosa io desideri.

Answer 1

È possibile creare che nel proprio stile per quella pagina. Spostare le icone e assegnarle una larghezza del 50% (o inferiore se si utilizzano i bordi con il modello box)

Answer 2

Dato che non si ha molto da fare su ciò che è necessario richiede il corpo qui, sento che il modo in cui la navigazione dell'intestazione potrebbe essere il più facile. Basta inserire il seguente codice subito dopo l'intestazione per la tua pagina. Per esempio:

<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 --> 

Dal momento che si dispone di sei articoli qui, jQuery Mobile automagicamente allinearle in una formazione della griglia 2x3 come visualizzato nella vostra mockup (almeno si prenderà cura di larghezza). Oltre a questo, la tua migliore scommessa per l'altezza potrebbe essere fare un po 'di aritmetica in css. Ad es .: se la barra di intestazione è 12px, imposta l'altezza di ogni blocco: 33% -4px;

Per le impostazioni del colore e simili, jquery mobile theme roller funziona in modo migliore rispetto a fare css fatti a mano.

Answer 3

griglia Usa dati "a"

Utilizzare il sotto di un

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