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

?

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

jQuery Mobile 會對默認的 HTML 渲染進行樣式豐富， Kayo 曾經在 之前的文章 中以 button 組件為例子介紹過 jQuery Mobile 樣式豐富的方法，各位可以參考前文中的第一部分—— Button 組件及 jQuery Mobile 如何豐富組件樣式 ，來了解 jQuery Mobile 基本 HTML 樣式的豐富方法。

?

二.主題內容（Theming content）

有看過 Kayo 之前所寫的文章的童鞋應該對主題內容不陌生了，所有的 jQuery Mobile 組件均支持通過添加 "data-theme=" 屬性來為組件添加顏色主題，該屬性默認有五個值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發者還可以通過在 CSS 里添加相應的 Class 來自定義顏色。

?

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

?

三.可折疊內容塊（Collapsible content blocks）

在 jQuery Mobile 里，可以通過給容器添加 data-role="collapsible" 來產生一個可折疊內容塊組件，通常容器中需要類似如下類型的結構：

          <div data-role="collapsible">
    <h3>標題部分</h3>
    <p>主體內容部分，默認會在本頁折疊</p>
</div>
        

?

效果如下：

?

另外在新版的可折疊內容塊組件中，可折疊塊默認是收縮起來的，點擊標題展開內容，再次點擊則重新折疊內容，開發者可以通過給可折疊內容塊的容器添加 data-collapsed="false" 屬性使折疊塊默認為展開的。

?

可折疊內容塊組件支持嵌套使用：

          <div data-role="collapsible">
    <h3>標題部分</h3>
    <div data-role="collapsible">
        <h3>標題部分</h3>
        <p>主體內容部分，默認會在本頁折疊</p>
    </div>
</div>
        

?

四.折疊組（Collapsible sets）

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

?

假如 HTML 代碼如下：

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

?

得到如下如所示的效果

?

五.網格布局（Layout grids）

為了能創建比較復雜的布局（兩列布局（class 中含有 ui-grid-a）和三列布局 （class 中含有 ui-grid-b））， jQuery Mobile 利用 CSS 創建了兩種預設的配置布局。

?

1.兩欄布局

要創建兩欄布局，可以先給父元素添加 ui-grid-a 的 class ，然后分別為第一個子元素添加 ui-block-a 的 class ， 第二個子元素添加 ui-block-b 的 class ，具體例子如下：

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

?

效果如下圖：

?

另外網格布局也可用于 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.多欄布局

要創建三欄布局，可以先給父元素添加 ui-grid-b 的 class ，然后分別為第一個子元素添加 ui-block-a 的 class ， 第二個元素添加 ui-block-b 的 class ，第三個元素添加 ui-block-c 的 class 。

?

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

?

六.完整 Demo

完整實例 Demo （建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）。

?

關于列表組件（List View）， Kayo 將會另外寫文章介紹。

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