Lưới jQuery Mobile

jQuery Mobile Lưới Định Dạng

jQuery Mobile cung cấp một bộ giải pháp lưới cột dựa trên CSS. Tuy nhiên, không khuyến khích sử dụng lưới cột trên các thiết bị di động, do giới hạn độ rộng màn hình của các thiết bị di động.

Nhưng có những lúc bạn cần định vị các phần tử nhỏ hơn, chẳng hạn như nút hoặc thanh điều hướng, như trong bảng và nổi song song. Lúc này, lưới cột chính xác là điều cần thiết.

Các cột trong lưới đều có độ rộng bằng nhau (tổng độ rộng là 100%), không có viền, nền, lề hoặc biên độ.

Có bốn loại lưới布局 có thể sử dụng:

lớp lưới cột bề rộng cột tương ứng ví dụ
ui-grid-a 2 50% / 50% ui-block-a|b Kiểm tra
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Kiểm tra
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Kiểm tra
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Kiểm tra

Lưu ý:Trong bộ chứa cột, dựa trên số lượng cột khác nhau, các phần tử con có thể được đặt lớp ui-block-a|b|c|d|e. Các cột này sẽ nổi song song theo thứ tự.

Ví dụ 1: Đối với lớp ui-grid-a (lưới hai cột), bạn phải quy định hai phần tử con ui-block-a và ui-block-b.

Ví dụ 2: Đối với lớp ui-grid-b (lưới ba cột), bạn cần thêm ba phần tử con ui-block-a, ui-block-b và ui-block-c.

Tùy chỉnh lưới

Bạn có thể tùy chỉnh khối cột bằng cách sử dụng CSS:

ví dụ

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Thử trực tiếp

Bạn cũng có thể tùy chỉnh khối bằng cách sử dụng phong cách nội bộ:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

Nhiều hàng

Cũng có thể chứa nhiều hàng trong cột.

Ghi chú:ui-block-a-class sẽ luôn tạo ra hàng mới:

ví dụ

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

Thử trực tiếp