今天開(kāi)始， “ 使用 jQuery Mobile 與 HTML5 開(kāi)發(fā) Web App ” 的系列文章將會(huì)繼續(xù)，這次要介紹的是 jQuery Mobile 的內(nèi)容格式部分，這也是 jQuery Mobile 的組件部分，包含了基本 HTML 樣式（Basic HTML styles），主題內(nèi)容（Theming content），可折疊內(nèi)容塊（Collapsible content blocks），折疊組（Collapsible sets），網(wǎng)格布局（Layout grids），以及一套列表組件（List View），其中 jQuery Mobile 官方把除列表組件外的其他部分統(tǒng)稱(chēng)為內(nèi)容的格式化（Content formatting），下面 Kayo 將會(huì)為大家一一介紹這些內(nèi)容格式。

?

一.基本 HTML 樣式（Basic HTML styles）

jQuery Mobile 會(huì)對(duì)默認(rèn)的 HTML 渲染進(jìn)行樣式豐富， Kayo 曾經(jīng)在 之前的文章 中以 button 組件為例子介紹過(guò) jQuery Mobile 樣式豐富的方法，各位可以參考前文中的第一部分—— Button 組件及 jQuery Mobile 如何豐富組件樣式 ，來(lái)了解 jQuery Mobile 基本 HTML 樣式的豐富方法。

?

二.主題內(nèi)容（Theming content）

有看過(guò) Kayo 之前所寫(xiě)的文章的童鞋應(yīng)該對(duì)主題內(nèi)容不陌生了，所有的 jQuery Mobile 組件均支持通過(guò)添加 "data-theme=" 屬性來(lái)為組件添加顏色主題，該屬性默認(rèn)有五個(gè)值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開(kāi)發(fā)者還可以通過(guò)在 CSS 里添加相應(yīng)的 Class 來(lái)自定義顏色。

?

需要自定義主題顏色的童鞋可以編輯 jquery.mobile-1.1.0 文件，在文件中模仿 a, b, c, d, e 默認(rèn)樣式的 css 寫(xiě)出自定義的顏色，值得一提的是， jQuery Mobile 的主題顏色是使用 CSS3 的漸變顏色，因此直接寫(xiě)出自己的顏色比較困難，建議大家使用 jQuery Mobile 官方的 主題編輯器 ，可以很方便的創(chuàng)建自定義的主題。

?

三.可折疊內(nèi)容塊（Collapsible content blocks）

在 jQuery Mobile 里，可以通過(guò)給容器添加 data-role="collapsible" 來(lái)產(chǎn)生一個(gè)可折疊內(nèi)容塊組件，通常容器中需要類(lèi)似如下類(lèi)型的結(jié)構(gòu)：

          <div data-role="collapsible">
    <h3>標(biāo)題部分</h3>
    <p>主體內(nèi)容部分，默認(rèn)會(huì)在本頁(yè)折疊</p>
</div>
        

?

效果如下：

?

另外在新版的可折疊內(nèi)容塊組件中，可折疊塊默認(rèn)是收縮起來(lái)的，點(diǎn)擊標(biāo)題展開(kāi)內(nèi)容，再次點(diǎn)擊則重新折疊內(nèi)容，開(kāi)發(fā)者可以通過(guò)給可折疊內(nèi)容塊的容器添加 data-collapsed="false" 屬性使折疊塊默認(rèn)為展開(kāi)的。

?

可折疊內(nèi)容塊組件支持嵌套使用：

          <div data-role="collapsible">
    <h3>標(biāo)題部分</h3>
    <div data-role="collapsible">
        <h3>標(biāo)題部分</h3>
        <p>主體內(nèi)容部分，默認(rèn)會(huì)在本頁(yè)折疊</p>
    </div>
</div>
        

?

四.折疊組（Collapsible sets）

把若干個(gè)可折疊內(nèi)容塊組件用一容器包裹，并給包裹添加 data-role="collapsible-set" 屬性，即為折疊組組件。 jQuery Mobile 會(huì)把這些可折疊內(nèi)容塊在樣式上整合為一個(gè)整體，產(chǎn)生類(lèi)似于手風(fēng)琴的效果（每次只會(huì)展開(kāi)一個(gè)子元素）。

?

假如 HTML 代碼如下：

          <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false">
        <h3>第一部分</h3>
        <p>第一部分主體內(nèi)容</p>
 
        </div>       
        <div data-role="collapsible">
        <h3>第二部分</h3>
        <p>第二部分主體內(nèi)容<</p>
        </div>
         
        <div data-role="collapsible">
        <h3>第三部分</h3>
        <p>第三部分主體內(nèi)容</p>
        </div>
</div>
        

?

得到如下如所示的效果

?

五.網(wǎng)格布局（Layout grids）

為了能創(chuàng)建比較復(fù)雜的布局（兩列布局（class 中含有 ui-grid-a）和三列布局 （class 中含有 ui-grid-b））， jQuery Mobile 利用 CSS 創(chuàng)建了兩種預(yù)設(shè)的配置布局。

?

1.兩欄布局

要?jiǎng)?chuàng)建兩欄布局，可以先給父元素添加 ui-grid-a 的 class ，然后分別為第一個(gè)子元素添加 ui-block-a 的 class ， 第二個(gè)子元素添加 ui-block-b 的 class ，具體例子如下：

          <div class="ui-grid-a">
    <div class="ui-block-a">第一個(gè)子元素 Block A</div>
    <div class="ui-block-b">第二個(gè)子元素Block B</div>
</div>
        

?

效果如下圖：

?

另外網(wǎng)格布局也可用于 jQuery Mobile 組件中，如下的 HTML：

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

?

效果如下：

?

2.多欄布局

要?jiǎng)?chuàng)建三欄布局，可以先給父元素添加 ui-grid-b 的 class ，然后分別為第一個(gè)子元素添加 ui-block-a 的 class ， 第二個(gè)元素添加 ui-block-b 的 class ，第三個(gè)元素添加 ui-block-c 的 class 。

?

以此類(lèi)推，四欄布局使用 ui-grid-c 的 class ，五欄布局使用 ui-grid-d 的 class 。

?

六.完整 Demo

完整實(shí)例 Demo （建議使用 PC 上的 Firefox、Chrome 等現(xiàn)代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統(tǒng)瀏覽器瀏覽）。

?

關(guān)于列表組件（List View）， Kayo 將會(huì)另外寫(xiě)文章介紹。

原文由 Kayo Lee 發(fā)表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-content-formatting.html