jQuery Mobile 網格

jQuery Mobile 網格佈局

jQuery Mobile 提供了一套基於 CSS 的分列布局。然而，在移動裝置上，由於考慮手機的螢幕寬度狹窄，一般不建議使用分欄分列布局。

但有時您想要將較小的元素（如按鈕或導航標籤）並排地排列在一起，就像是在一個表格中一樣。這種情況下，推薦使用分列布局。

網格中的列是等寬的（合計是 100%），沒有邊框、背景、margin 或 padding。

這裡有四種佈局網格可供使用：

網格類 列 列寬 對應 例項
ui-grid-solo 1 100% ui-block-a 嘗試一下
ui-grid-a 2 50% / 50% ui-block-a|b 嘗試一下
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c 嘗試一下
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d 嘗試一下
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 嘗試一下

在列容器內，子元素擁有的 class 為 ui-block-a|b|c|d|e 取決於列數。列會浮動並排。

例項 1:class 為 ui-grid-a（兩列布局），您必須指定 ui-block-a 和 ui-block-b 的兩個子元素。

例項 2:class 為 ui-grid-b（三列布局），則必須新增 ui-block-a、ui-block-b 和 ui-block-c 的三個子元素。

自定義網格

通過使用CSS，您可以自定義列塊：

例項

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

嘗試一下 ?

您也可以通過使用內嵌樣式來自定義塊：

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

多行

在列中也可以有多個行。

注意：ui-block-a-class 總是建立一個新行：

例項

<div class="ui-grid-b">
  <div class="ui-block-a"><span>一些文字</span></div>
  <div class="ui-block-b"><span>一些文字</span></div>
  <div class="ui-block-c"><span>一些文字</span></div>
  <div class="ui-block-a"><span>一些文字</span></div>
  <div class="ui-block-b"><span>一些文字</span></div>
  <div class="ui-block-a"><span>一些文字</span></div>
</div>

嘗試一下 ?

響應式網格

在小螢幕中，不建議一行中並排太多按鈕（文字會縮短）。

我們在容器使用 ui-responsive 類來建立響應式網格：

例項

<div class="ui-grid-b ui-responsive">

嘗試一下 ?