詳解jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用

更新時(shí)間：2015年12月03日 16:44:31 投稿：goldensun

這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁(yè)面布局方式為主,需要的朋友可以參考下

在移動(dòng)設(shè)備上，屏幕寬度狹窄，因此通常不使用多欄布局，但是有時(shí)你可能需要將小的元素（如按鈕或并排導(dǎo)航標(biāo)簽，例如）多列排列在一起。Jquery Mobile 框架提供了一種簡(jiǎn)單的方法構(gòu)建基于css 的分欄布局，叫做ui-grid

Jquery Mobile 提供有四個(gè)預(yù)設(shè)的布局，可以在任何情況下都需要列

兩列（使用ui-grid-a類(lèi)）
三列（使用ui-grid-b類(lèi)）
四列（使用ui-grid-c類(lèi)）
五列（使用ui-grid-d類(lèi)）

網(wǎng)格是100%的寬度，完全看不見(jiàn)的（沒(méi)有邊界或背景）和沒(méi)有margin或padding，所以他們不會(huì)干擾樣式的元素放在他們里面。在網(wǎng)格容器，子元素被分配ui-block-a / b / c/ d 以連續(xù)的方式，使每個(gè)“塊”元素浮動(dòng)并列，形成網(wǎng)格。其中ui-block-a類(lèi)基本上清除浮將開(kāi)始新的一行（見(jiàn)多行的網(wǎng)格，在下面）。

ui-grid-a 兩列布局

建立個(gè)兩列（50 / 50%）布局，第一層（父容器）添加ui-grid-a屬性，第二層（兩個(gè)子容器）里面分別添加ui-block-a和ui-block-b：

<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)容布局：

2015123162840041.jpg (828×100)

正如你看到的，缺省情況下網(wǎng)格沒(méi)有視覺(jué)造型；他們只是呈現(xiàn)內(nèi)容并排。

網(wǎng)格的類(lèi)可以被應(yīng)用到任何容器。在下一個(gè)例子中，我們添加一個(gè)ui-grid-a，并應(yīng)用ui-block，兩個(gè)按鈕分別延伸到50%的屏幕寬度

<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>

2015123162902752.jpg (831×97)

請(qǐng)注意，這個(gè)框架增加網(wǎng)格中的左和右margin的按鈕。為一個(gè)單一的按鈕，您可以使用類(lèi)ui-grid-solo和按鈕類(lèi)ui-block-a，像下面的例子一個(gè)div。這樣的按鈕將得到同樣的margin

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

2015123162921932.jpg (821×138)

主題類(lèi)（沒(méi)有數(shù)據(jù)主題屬性）從主題系統(tǒng)可以被添加到一個(gè)元素，包括網(wǎng)格。在下面的塊，我們?cè)黾恿藘蓚€(gè)類(lèi)：ui-bar添加默認(rèn)的bar和ui-bar-e應(yīng)用背景梯度和字體風(fēng)格的“E”工具欄主題的樣本。為了說(shuō)明的目的，一個(gè)內(nèi)聯(lián)style=“height：120px”屬性也被添加到每個(gè)網(wǎng)格設(shè)置每一個(gè)標(biāo)準(zhǔn)高度。

2015123162939675.jpg (816×148)

ui-block-b 三列布局

網(wǎng)格布局配置使用class= ui-grid-b在父母和3個(gè)子容器的元素，每個(gè)都有其各自的ui-block-a / a / c類(lèi)，創(chuàng)建一行三列布局（33 / 33 / 33%）。注意：這些塊同樣風(fēng)格的主題課程，網(wǎng)格布局清晰可見(jiàn)。

<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-b -->

這為我們的內(nèi)容,將產(chǎn)生一個(gè)33 / 33 / 33%網(wǎng)格布局

2015123162955517.jpg (827×293)

ui-block-c 四列布局

一行四列，25 / 25 / 25 / 25%網(wǎng)格，是通過(guò)在父容器指定class= ui-grid-c和添加四分之一塊。注意：這些塊同樣風(fēng)格的主題課程，網(wǎng)格布局清晰可見(jiàn)

2015123163016861.jpg (834×159)

ui-block-c 五列布局

一行五列，20 / 20 / 20 / 20 / 20%網(wǎng)格，是通過(guò)在父容器指定class= ui-grid-d

2015123163036328.jpg (831×161)

多行多列布局

網(wǎng)格設(shè)計(jì)包裝的項(xiàng)目多行。例如，如果您指定了一個(gè)三行三列網(wǎng)格（ui-grid-b）在一個(gè)容器，有九個(gè)子塊，則換到3排各3項(xiàng)。有一個(gè)CSS規(guī)則明確的花車(chē)和開(kāi)始新的一行，當(dāng)class= ui-block-a是確保在重復(fù)序列分配塊（A，B，C類(lèi)，A，B，C，等）映射到網(wǎng)格類(lèi)型?？梢越o每行的第一個(gè)容器設(shè)置為class=ui-block-a 來(lái)清除浮動(dòng)，這樣9 個(gè)子容器的class 應(yīng)為：class=ui-block-(a,b,c,a,b,c,a,b,c)。

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

2015123163102847.jpg (827×462)

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <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 -->
 </div>
</div>
 
</body>
</html>

2015123163121080.jpg (785×211)