jQuery Mobile'da Menü Izgarası

Question

Bu yerleşimi jQuery Mobile ile uygulamanın en iyi yolu nedir (bu örnekte menü-ızgara, 6 düğme)?

jQuery Mobile ızgarasını denedim, ancak tam genişlik ve tam yükseklik yapma ve istediğim her şeye rengini değiştirme gibi birçok sorun yaşadım.

Answer 1

O sayfası için kendi stil o oluşturabilir. Simgeleri süzün ve onlara% 50 genişlik (ya da kutu modeliyle sınırları kullanıyorsanız daha az) verin.

Answer 2

Burada gerekli olana fazla ihtiyaç duymadığınızdan, başlık navigasyonunun gidişatını hissediyorum kolay. Aşağıdaki kodu sayfanızın başlığından hemen sonra koyun. eg için: Buraya altı çizelgesine beri mockup görüntülenen olarak

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

, jquery mobil Automagically 2x3 ızgara biçiminde onları uyumlu hale getirecektir (en az genişliği ilgilenir). Bunun dışında, yükseklik için en iyi bahis css'de biraz aritmetik yapıyor olabilir. Örneğin: eğer başlık çubuğu 12px ise, o zaman her bloğun yüksekliğini ayarlayın:% 33 -4px;

Renk ayarları ve benzeri için, jquery mobile theme roller el işi css yapmaktan daha iyi çalışıyor.

Answer 3

kullanımı veri ızgara "a"

kullanımı altında bir

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