jQuery Mobile教程:網格grid組件

文章簡介：本文主要看一下jQuery Mobile體系中的grid組件.

本文主要看一下jQuery Mobile體系中的grid組件，我們採用"提問●回答"的方式來初步地瞭解一下：

1、如何設定2列布局？

樣本：

<!-- grid container start --> <div class="ui-grid-a">  <!-- grid block start --> <div class="ui-block-a"> 我是左邊的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-b"> 我是右邊的部分 </div> <!-- grid block end -->  </div> <!-- grid container end -->

圖示：

說明：
1、給grid container增加ui-grid-a標示2列布局

2、如何設定3列布局？

樣本：

<!-- grid container start --> <div class="ui-grid-b">  <!-- grid block start --> <div class="ui-block-a"> 我是左邊的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-b"> 我是中間的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-c"> 我是右邊的部分 </div> <!-- grid block end -->  </div> <!-- grid container end -->

圖示：

說明：
1、給grid container增加ui-grid-b標示3列布局

3、如何設定4列布局？

樣本：

<!-- grid container start --> <div class="ui-grid-c">  <!-- grid block start --> <div class="ui-block-a"> 我是左邊的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-b"> 我是中間1的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-c"> 我是中間2的部分 </div> <!-- grid block end -->  <!-- grid block start --> <div class="ui-block-d"> 我是右邊的部分 </div> <!-- grid block end -->  </div> <!-- grid container end -->

圖示：

說明：
1、給grid container增加ui-grid-c標示4列布局

很多同學看到這裡面就問了，後面還能支援5列？6列？...還是更多？
其實jquery mobile有自身的一套體系，我們可以看看下面的圖

grid container的className的配置如下：

grid block的className的配置如下：

demo