Latest web development tutorials

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 嘗試一下

lamp 在列容器內,子元素擁有的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" >

嘗試一下»