溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關jQuery mobile如何實現網格布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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"><h2>頭部欄標題</h2></div>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b h70">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b h70">B</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c h70">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c h70">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c h70">C</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-d h70">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-d h70">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-d h70">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-d h70">D</div>
</div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e h70">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e h70">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e h70">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-e h70">D</div>
</div>
<div class="ui-block-e">
<div class="ui-bar ui-bar-e h70">E</div>
</div>
</div>
<div data-role="footer"><h5>2012 rttop.cn studio</h5></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 h70">A</div>
在上述代碼中，<div>元素通過“class”屬性添加了三個樣式。第一個和第二個都是jQuery Mobile自帶的樣式，“ui-bar”用于控制各子容器的間距，“ui-bar-b”用于設置各子容器的主題樣式。第三個樣式“h70”為自定義樣 式，將子容器的高度設置為“60px”。
說明 如果容器選擇的樣式為兩列即“class”值為“ui-grid-a”，而在它的子容器中添加了三個子項即“class”值為“ui-block-c”，那么該列自動被放置在下一行。
關于“jQuery mobile如何實現網格布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
