3.4 內容格式化
jQuery Mobile中提供了許多非常有用的工具與組件，如多列的網格佈局、摺疊形的面板控制等，這些組件可以幫助開發者快速實現正文區域內容的格式化。
3.4.1 網格佈局
jQuery Mobile提供的CSS樣式“ui-grid”可以實現內容的網格佈局。該樣式有4種預設的配置佈局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”，分別對應兩列、三列、四列、五列的網格佈局形式，可以最大範圍滿足頁面多列的需求。
使用網格佈局時，整個寬度爲100%，無任何“padding”和“margin”及背景色，因此不會影響到其他元素放入網格中的位置。
實例3-12 在內容區域添加多種類型的網格佈局
1. 功能說明
新建一個HTML 頁面，在內容區域中添加4種預設的網格佈局，並且通過不同的主題顏色進行區分，以分塊的形式顯示在頁面中。
2. 實現代碼
新建一個HTML頁面3-12.htm，加入代碼如代碼清單3-12所示。
代碼清單 3-12 在內容區域添加多種類型的網格佈局
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 網格佈局</title>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css" />
<link href="Css/css3.css"
rel="Stylesheet" type="text/css" />
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>頭部欄標題</h1></div>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b h60">B</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c h60">C</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-d h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-d h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-d h60">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-d h60">D</div>
</div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e h60">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-e h60">D</div>
</div>
<div class="ui-block-e">
<div class="ui-bar ui-bar-e h60">E</div>
</div>
</div>
<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3. 源碼分析
在本實例的代碼中，要增加一個多列的網格區域，首先通過<div>元素構建一個容器，如果是兩列，則給該容器添加的“class”屬性值爲“ui-grid-a”；三列則爲“ui-grid-b”，依此類推。
然後，在已構建的容器中添加子容器，如果是兩列，則給兩個子容器分別添加“ui-block-a”、“ui-block-b”樣式屬性；如果是三 列，則給三個子容器分別添加“ui-block-a”、“ui-block-b”、“ui-block-c”樣式屬性；其他多列依此類推。
最後，在子容器中放置需要顯示的內容。在本實例中，每個子容器都分別放置了一個<div>元素，代碼如下所示：
<div class="ui-bar ui-bar-b h60">A</div>
在上述代碼中，<div>元素通過“class”屬性添加了三個樣式。第一個和第二個都是jQuery Mobile自帶的樣式，“ui-bar”用於控制各子容器的間距，“ui-bar-b”用於設置各子容器的主題樣式。第三個樣式“h60”爲自定義樣 式，將子容器的高度設置爲“60px”。
說明 如果容器選擇的樣式爲兩列即“class”值爲“ui-grid-a”，而在它的子容器中添加了三個子項即“class”值爲“ui-block-c”，那麼該列自動被放置在下一行。