Lưới Menu trong jQuery Mobile

Question

Cách tốt nhất để triển khai bố cục này với jQuery Mobile (menu-lưới, 6 nút trong ví dụ này) là gì?

Tôi đã thử lưới jQuery Mobile nhưng tôi gặp nhiều vấn đề như làm cho nó có chiều rộng và chiều cao đầy đủ và thay đổi màu thành bất kỳ thứ gì tôi muốn.

Answer 1

Bạn có thể tạo điều đó theo kiểu của riêng bạn cho trang đó. Float các biểu tượng và cung cấp cho họ một chiều rộng 50% (hoặc ít hơn nếu bạn đang sử dụng biên giới với mô hình hộp)

Answer 2

Vì bạn không có nhiều đang diễn ra cần thiết cơ thể ở đây, tôi cảm thấy đi đường dẫn hướng có thể được dễ nhất. Chỉ cần đặt mã sau ngay sau tiêu đề cho trang của bạn. Đối với ví dụ:

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

Vì bạn có sáu mặt hàng ở đây, jquery di động sẽ Automagically sắp xếp chúng trong một hình lưới 2x3 như được hiển thị trong mockup của bạn (ít nhất sẽ chăm sóc chiều rộng). Khác hơn này, đặt cược tốt nhất cho chiều cao của bạn có thể làm một số số học trong css. Ví dụ: nếu thanh tiêu đề là 12px, sau đó đặt chiều cao của mỗi khối: 33% -4px;

Để cài đặt màu sắc và như vậy, jquery mobile theme roller hoạt động tốt hơn so với thực hiện css làm bằng tay.

Answer 3

lưới Sử dụng dữ liệu "a"

Sử dụng dưới một

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