詳解jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用
在移動(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類)
- 三列(使用ui-grid-b類)
- 四列(使用ui-grid-c類)
- 五列(使用ui-grid-d類)
網(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類基本上清除浮將開(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)容布局:
正如你看到的,缺省情況下網(wǎng)格沒(méi)有視覺(jué)造型;他們只是呈現(xiàn)內(nèi)容并排。
網(wǎng)格的類可以被應(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>
請(qǐng)注意,這個(gè)框架增加網(wǎng)格中的左和右margin的按鈕。為一個(gè)單一的按鈕,您可以使用類ui-grid-solo和按鈕類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>
主題類(沒(méi)有數(shù)據(jù)主題屬性)從主題系統(tǒng)可以被添加到一個(gè)元素,包括網(wǎng)格。在下面的塊,我們?cè)黾恿藘蓚€(gè)類: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)高度。
ui-block-b 三列布局
網(wǎng)格布局配置使用class= ui-grid-b在父母和3個(gè)子容器的元素,每個(gè)都有其各自的ui-block-a / a / c類,創(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)格布局
ui-block-c 四列布局
一行四列,25 / 25 / 25 / 25%網(wǎng)格,是通過(guò)在父容器指定class= ui-grid-c和添加四分之一塊。注意:這些塊同樣風(fēng)格的主題課程,網(wǎng)格布局清晰可見(jiàn)
ui-block-c 五列布局
一行五列,20 / 20 / 20 / 20 / 20%網(wǎng)格,是通過(guò)在父容器指定class= ui-grid-d
多行多列布局
網(wǎng)格設(shè)計(jì)包裝的項(xiàng)目多行。例如,如果您指定了一個(gè)三行三列網(wǎng)格(ui-grid-b)在一個(gè)容器,有九個(gè)子塊,則換到3排各3項(xiàng)。有一個(gè)CSS規(guī)則明確的花車和開(kāi)始新的一行,當(dāng)class= ui-block-a是確保在重復(fù)序列分配塊(A,B,C類,A,B,C,等)映射到網(wǎng)格類型??梢越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>
<!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>
相關(guān)文章
jQuery.Validate 使用筆記(jQuery Validation范例 )
學(xué)習(xí)jQuery Validation,于是手寫(xiě)一公共范例,并收藏以便后用,里面附有測(cè)試代碼,需要的朋友一起來(lái)測(cè)試。2010-06-06jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
bind與on的區(qū)別就在于–事件冒泡,關(guān)于jquery中的on與bind綁定事件的區(qū)別通過(guò)本文給大家實(shí)例講解,需要的朋友參考下吧2017-02-02基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法實(shí)例代碼,需要的朋友們參考下。2019-11-11jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
使用jquery的scrollTop方法監(jiān)視頁(yè)面垂直滾動(dòng)像素,并根據(jù)像素隱藏或者顯示頂部的導(dǎo)航條,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05jquery 多行滾動(dòng)代碼(附詳細(xì)解釋)
在網(wǎng)上可以隨處找到這段代碼,但是沒(méi)有任何人解釋這段代碼,只要自己研究好久。2010-06-06jQuery插件echarts實(shí)現(xiàn)的循環(huán)生成圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的循環(huán)生成圖效果,結(jié)合完整實(shí)例形式分析了echarts插件循環(huán)輸出數(shù)字圖形的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03