詳解jQuery行動頁面開發中的ui-grid網格佈局使用_jquery
- WBOY原創
- 2016-05-16 15:27:391697瀏覽
在行動裝置上，螢幕寬度狹窄，因此通常不使用多欄佈局，但是有時你可能需要將小的元素（如按鈕或並排導航標籤，例如）多列排列在一起。 Jquery Mobile 框架提供了一個簡單的方法來建構基於css 的分欄佈局，稱為ui-grid
Jquery Mobile 提供有四個預設的佈局，可以在任何情況下都需要列
- 兩個欄位（使用ui-grid-a類）
- 三列（使用ui-grid-b類）
- 四列（使用ui-grid-c類）
- 五列（使用ui-grid-d類）
網格是100%的寬度，完全看不見的（沒有邊界或背景）和沒有margin或padding，所以他們不會幹擾樣式的元素放在他們裡面。在網格容器，子元素被分配ui-block-a / b / c/ d 以連續的方式，使每個「區塊」元素浮動並列，形成網格。其中ui-block-a類基本上清除浮將開始新的一行（請參閱多行的網格，在下面）。
ui-grid-a 兩列版面
建立一個兩列（50 / 50%）佈局，第一層（父容器）加入ui-grid-a屬性，第二層（兩個子容器）裡面分別加入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 -->
上述標記產生以下內容版面：
如你所看到的，缺省情況下網格沒有視覺造型；他們只是呈現內容並排。
網格的類別可以被應用到任何容器。在下一個例子中，我們新增一個ui-grid-a，並套用ui-block，兩個按鈕分別延伸到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>
請注意，這個框架增加網格中的左和右margin的按鈕。為一個單一的按鈕，您可以使用類別ui-grid-solo和按鈕類別ui-block-a，像下面的範例一個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>
主題類別（沒有資料主題屬性）從主題系統可以被加入到一個元素，包括網格。在下面的區塊，我們增加了兩個類別：ui-bar添加預設的bar和ui-bar-e應用背景梯度和字體風格的「E」工具列主題的樣本。為了說明的目的，一個內嵌style=“height：120px”屬性也被加到每個網格設定每一個標準高度。
ui-block-b 三列佈局
網格佈局配置使用class= ui-grid-b在父母和3個子容器的元素，每個都有其各自的ui-block-a / a / c類，建立一行三列佈局（33 / 33 / 33%）。注意：這些區塊同樣風格的主題課程，網格佈局清晰可見。
<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 -->
這為我們的內容,將產生一個33 / 33 / 33%網格佈局
ui-block-c 四列佈局
一行四列，25 / 25 / 25 / 25%網格，是透過在父容器指定class= ui-grid-c和添加四分之一塊。注意：這些區塊同樣風格的主題課程，網格佈局清晰可見
ui-block-c 五列佈局
一行五列，20 / 20 / 20 / 20 / 20%網格，是透過在父容器指定class= ui-grid-d
多行多列版面配置
網格設計包裝的項目多行。例如，如果您指定了一個三行三列網格（ui-grid-b）在一個容器，有九個子區塊，則換到3排各3項。有一個CSS規則明確的花車和開始新的一行，當class= ui-block-a是確保在重複序列分配塊（A，B，C類，A，B，C，等）映射到網格類型。可以將每行的第一個容器設定為class=ui-block-a 來清除浮動，這樣9 個子容器的class 應為：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>
<!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" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <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>
