建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)jQuery mobile如何實現(xiàn)網(wǎng)格布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計、網(wǎng)站制作與策劃設(shè)計,仙游網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:仙游等地區(qū)。仙游做網(wǎng)站價格咨詢:028-86922220
3.4 內(nèi)容格式化
jQuery Mobile中提供了許多非常有用的工具與組件，如多列的網(wǎng)格布局、折疊形的面板控制等，這些組件可以幫助開發(fā)者快速實現(xiàn)正文區(qū)域內(nèi)容的格式化。
3.4.1 網(wǎng)格布局
jQuery Mobile提供的CSS樣式“ui-grid”可以實現(xiàn)內(nèi)容的網(wǎng)格布局。該樣式有4種預(yù)設(shè)的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”，分別對應(yīng)兩列、三列、四列、五列的網(wǎng)格布局形式，可以最大范圍滿足頁面多列的需求。
使用網(wǎng)格布局時，整個寬度為100%，無任何“padding”和“margin”及背景色，因此不會影響到其他元素放入網(wǎng)格中的位置。
實例3-12 在內(nèi)容區(qū)域添加多種類型的網(wǎng)格布局
1. 功能說明
新建一個HTML 頁面，在內(nèi)容區(qū)域中添加4種預(yù)設(shè)的網(wǎng)格布局，并且通過不同的主題顏色進(jìn)行區(qū)分，以分塊的形式顯示在頁面中。
2. 實現(xiàn)代碼
新建一個HTML頁面3-12.htm，加入代碼如代碼清單3-12所示。
代碼清單 3-12 在內(nèi)容區(qū)域添加多種類型的網(wǎng)格布局
rel="Stylesheet" type="text/css" />
rel="Stylesheet" type="text/css" />
頭部欄標(biāo)題
2012 rttop.cn studio
3. 源碼分析
在本實例的代碼中，要增加一個多列的網(wǎng)格區(qū)域，首先通過
然后，在已構(gòu)建的容器中添加子容器，如果是兩列，則給兩個子容器分別添加“ui-block-a”、“ui-block-b”樣式屬性；如果是三 列，則給三個子容器分別添加“ui-block-a”、“ui-block-b”、“ui-block-c”樣式屬性；其他多列依此類推。
最后，在子容器中放置需要顯示的內(nèi)容。在本實例中，每個子容器都分別放置了一個
在上述代碼中，
說明 如果容器選擇的樣式為兩列即“class”值為“ui-grid-a”，而在它的子容器中添加了三個子項即“class”值為“ui-block-c”，那么該列自動被放置在下一行。
關(guān)于“jQuery mobile如何實現(xiàn)網(wǎng)格布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享題目：jQuerymobile如何實現(xiàn)網(wǎng)格布局
地址分享：http://www.dlmjj.cn/article/pjijcs.html
