基本的HTML樣式

在移動(dòng)設(shè)備上使用多列布局并不是我們推薦的，但是有時(shí)你可能會(huì)需要把一些小的元素比如按鈕導(dǎo)航tab等排成一行。

jQuery Mobile框架提供了一個(gè)簡(jiǎn)單的方法來構(gòu)建基于CSS的柵格布局，我們約定為ui-grid。

有兩個(gè)預(yù)設(shè)的配置布局 — 兩列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—幾乎可滿足在任何情況下使用的要求。網(wǎng)格寬度是100%的， 且不可見(沒有背景或邊框)，也沒有padding和margin，所以它們不應(yīng)該影響它們內(nèi)嵌元素的樣式。

兩列網(wǎng)格

要?jiǎng)?chuàng)建一個(gè)兩列(50/50%)布局，首先需要一個(gè)容器(class="ui-grid-a")，然后添加兩個(gè)子容器(分別添加 ui-block-a和 ui-block-b的 class )：

<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div><!-- /grid-a --> 

上述標(biāo)記產(chǎn)生下列內(nèi)容的布局：

正如您在上面看到的，預(yù)設(shè)網(wǎng)格塊沒有任何樣式，他們只顯示內(nèi)容。

網(wǎng)格class可以應(yīng)用于任何容器。在下面的例子中我們?yōu)閒ieldset添加了 ui-grid-a并為兩個(gè)button容器應(yīng)用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset> 

此外，網(wǎng)格塊可以采用主題化系統(tǒng)中的樣式 — 通過增加一個(gè)高度和顏色調(diào)板，就可以實(shí)現(xiàn)這種風(fēng)格的外觀：

三列網(wǎng)格

另一種網(wǎng)格布局配置在父級(jí)容器使用 class=ui-grid-b ，而三個(gè)子級(jí)容器使用ui-block-a/b/c ， 以創(chuàng)建三列的布局(33/33/33%)。

<div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div><!-- /grid-a --> 

以下是三列網(wǎng)格示例：

三列網(wǎng)格(帶按鈕)：

四列網(wǎng)格

四列網(wǎng)格使用 class=ui-grid-c來創(chuàng)建(25/25/25/25% )。

五列網(wǎng)格

四列網(wǎng)格使用 class=ui-grid-d來創(chuàng)建(20/20/20/20/20% )。

多行網(wǎng)格

網(wǎng)格被設(shè)計(jì)用來折斷多行的內(nèi)容。舉例來說，如果你指定一個(gè)三列網(wǎng)格中包含九個(gè)子塊，他們會(huì)折斷成三行三列的布局。 該布局需要為 class=ui-block-子塊使用一個(gè)重復(fù)的序列(a, b, c, a, b, c 等)來創(chuàng)建：

#p#

柵格布局 （Layout grids (columns)）

在移動(dòng)設(shè)備上使用多列布局并不是我們推薦的，但是有時(shí)你可能會(huì)需要把一些小的元素比如按鈕導(dǎo)航tab等排成一行。

jQuery Mobile框架提供了一個(gè)簡(jiǎn)單的方法來構(gòu)建基于CSS的柵格布局，我們約定為ui-grid。

有兩個(gè)預(yù)設(shè)的配置布局 — 兩列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—幾乎可滿足在任何情況下使用的要求。網(wǎng)格寬度是100%的， 且不可見(沒有背景或邊框)，也沒有padding和margin，所以它們不應(yīng)該影響它們內(nèi)嵌元素的樣式。

兩列網(wǎng)格

要?jiǎng)?chuàng)建一個(gè)兩列(50/50%)布局，首先需要一個(gè)容器(class="ui-grid-a")，然后添加兩個(gè)子容器(分別添加 ui-block-a和 ui-block-b的 class )：

<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div><!-- /grid-a --> 

上述標(biāo)記產(chǎn)生下列內(nèi)容的布局：

正如您在上面看到的，預(yù)設(shè)網(wǎng)格塊沒有任何樣式，他們只顯示內(nèi)容。

網(wǎng)格class可以應(yīng)用于任何容器。在下面的例子中我們?yōu)閒ieldset添加了 ui-grid-a并為兩個(gè)button容器應(yīng)用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset> 

此外，網(wǎng)格塊可以采用 主題化系統(tǒng) 中的樣式 — 通過增加一個(gè)高度和顏色調(diào)板，就可以實(shí)現(xiàn)這種風(fēng)格的外觀：

三列網(wǎng)格

另一種網(wǎng)格布局配置在父級(jí)容器使用 class=ui-grid-b ，而三個(gè)子級(jí)容器使用ui-block-a/b/c ， 以創(chuàng)建三列的布局(33/33/33%)。

<div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div><!-- /grid-a --> 

以下是三列網(wǎng)格示例：

三列網(wǎng)格(帶按鈕)：

四列網(wǎng)格

四列網(wǎng)格使用 class=ui-grid-c來創(chuàng)建(25/25/25/25% )。

五列網(wǎng)格

四列網(wǎng)格使用 class=ui-grid-d來創(chuàng)建(20/20/20/20/20% )。

多行網(wǎng)格

網(wǎng)格被設(shè)計(jì)用來折斷多行的內(nèi)容。舉例來說，如果你指定一個(gè)三列網(wǎng)格中包含九個(gè)子塊，他們會(huì)折斷成三行三列的布局。 該布局需要為 class=ui-block-子塊使用一個(gè)重復(fù)的序列(a, b, c, a, b, c 等)來創(chuàng)建：

#p#

可折疊塊

可折疊內(nèi)容標(biāo)記

創(chuàng)建一個(gè)可折疊的內(nèi)容塊，創(chuàng)建一個(gè)容器，并添加 data-role="collapsible" 屬性。

直接在容器里面添加任何標(biāo)題元素(H1-H6)。框架會(huì)把標(biāo)題自動(dòng)轉(zhuǎn)換為一個(gè)可點(diǎn)擊的按鈕并且添加一個(gè)“+”圖標(biāo)用來指明它是可以展開的。

在標(biāo)題后面可以添加任何HTML標(biāo)記。框架會(huì)自動(dòng)把這些標(biāo)記包裹在一個(gè)容器里用以折疊或顯示(當(dāng)點(diǎn)擊標(biāo)題時(shí))。

<div data-role="collapsible"> 
    <h3>I'm a header</h3> 
    <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p> 
    </div> 

我是可折疊的內(nèi)容。默認(rèn)我是顯示的，但是你可以點(diǎn)擊標(biāo)題來隱藏我!

正如這個(gè)例子說明，默認(rèn)情況下內(nèi)容是展開的，要在頁面加載時(shí)折疊內(nèi)容，添加 data-collapsed="true" 屬性：

<div data-role="collapsible" data-collapsed="true"> 

此代碼將創(chuàng)建一個(gè)可折疊的塊：

#p#

主題化內(nèi)容

主題化內(nèi)容區(qū)域

容器的主要內(nèi)容區(qū)( data-role="content"容器)，應(yīng)通過增加 為data-role="page"的父容器添加 data-theme 屬性來主題化，以確保背景色能夠在整個(gè)頁面都應(yīng)用，而不管內(nèi)容的長(zhǎng)度是多少。(如果你僅僅為內(nèi)容容器添加了 data-theme ，則背景色會(huì)在內(nèi)容結(jié)束部分截?cái)啵赡軙?huì)在固定footer和內(nèi)容之間產(chǎn)生留白 )

<div data-role="page" data-theme="a"> 

主題化可折疊塊

要為折疊塊的標(biāo)題設(shè)置顏色請(qǐng)為容器添加 data-theme 屬性。 該圖標(biāo)和主體目前沒有data屬性來主題化，但可以直接使用自定義的CSS樣式。

</p> <div data-role="collapsible" data-collapsed="true" data-theme="a">