版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
使用表格和CSS漸變來格式化內(nèi)容(第十講)知識(shí)回顧如何制作內(nèi)置列表?如何制作列表分割線?如何制作計(jì)數(shù)泡?如何制作拆分按鈕列表?教學(xué)內(nèi)容
jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊
重點(diǎn)、難點(diǎn)重點(diǎn)jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊難點(diǎn)jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊1.jQueryMobile布局網(wǎng)格
QueryMobile提供了一套基于CSS的分列布局。然而,在移動(dòng)設(shè)備上,由于考慮手機(jī)的屏幕寬度狹窄,一般不建議使用分欄分列布局。但有時(shí)您想要將較小的元素(如按鈕或?qū)Ш綐?biāo)簽)并排地排列在一起,就像是在一個(gè)表格中一樣。這種情況下,推薦使用分列布局。網(wǎng)格中的列是等寬的(合計(jì)是100%),沒有邊框、背景、margin或padding。
1.jQueryMobile布局網(wǎng)格
這里有四種布局網(wǎng)格可供使用:在列容器內(nèi),子元素?fù)碛械腸lass為ui-block-a|b|c|d|e取決于列數(shù)。列會(huì)浮動(dòng)并排。
實(shí)例1:class為ui-grid-a(兩列布局),您必須指定ui-block-a和ui-block-b的兩個(gè)子元素。
實(shí)例2:class為ui-grid-b(三列布局),則必須添加ui-block-a、ui-block-b和ui-block-c的三個(gè)子元素。
網(wǎng)格類列列寬對(duì)應(yīng)實(shí)例ui-grid-a250%/50%ui-block-a|b嘗試一下ui-grid-b333%/33%/33%ui-block-a|b|c嘗試一下ui-grid-c425%/25%/25%/25%ui-block-a|b|c|d嘗試一下ui-grid-d520%/20%/20%/20%/20%ui-block-a|b|c|d|e嘗試一下
1.jQueryMobile布局網(wǎng)格
下面是三列布局。效果圖如下,請(qǐng)制作:
2.自定義網(wǎng)格
通過使用CSS,您可以自定義列塊,如:<style>
.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color:lightgray;
border:1pxsolidblack;
height:100px;
font-weight:bold;
text-align:center;
padding:30px;
}
</style>
2.自定義網(wǎng)格
下面是三列布局。效果圖如下,請(qǐng)制作:
2.自定義網(wǎng)格
您也可以通過使用內(nèi)嵌樣式來自定義塊:<divclass="ui-block-a"style="border:1pxsolidblack;"><span>Text..</span></div>
3.多行
在列中也可以有多個(gè)行。注意:ui-block-a-class總是創(chuàng)建一個(gè)新行。實(shí)例如下:<divclass="ui-grid-b">
<divclass="ui-block-a"><span>SomeText</span></div>
<divclass="ui-block-b"><span>SomeText</span></div>
<divclass="ui-block-c"><span>SomeText</span></div>
<divclass="ui-block-a"><span>SomeText</span></div>
<divclass="ui-block-b"><span>SomeText</span></div>
<divclass="ui-block-a"><span>SomeText</span></div>
</div>
3.多行
效果圖如下,請(qǐng)制作:
4.jQueryMobile
可折疊塊
可折疊塊允許您隱藏或顯示內(nèi)容-對(duì)于存儲(chǔ)部分信息很有用。如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊,需要為容器添加data-role=“collapsible”屬性。在容器(div)內(nèi),添加一個(gè)標(biāo)題元素(H1-H6),后跟您想要進(jìn)行擴(kuò)展的HTML標(biāo)記。實(shí)例如下:4.jQueryMobile
可折疊塊
實(shí)例<div
data-role="collapsible">
<h1>點(diǎn)擊我-我可以折疊!</h1>
<p>我是可折疊的內(nèi)容。</p>
</div>4.jQueryMobile
可折疊塊
效果圖如下,請(qǐng)制作:點(diǎn)擊前頁面效果點(diǎn)擊后頁面效果4.jQueryMobile
可折疊塊
默認(rèn)情況下,內(nèi)容是被折疊起來的。如需在頁面加載時(shí)展開內(nèi)容,請(qǐng)使用data-collapsed=“false”。效果圖如下,請(qǐng)制作:點(diǎn)擊前頁面效果點(diǎn)擊后頁面效果4.jQueryMobile
可折疊塊
嵌套可折疊塊可折疊的內(nèi)容塊是可以彼此嵌套的。實(shí)例<div
data-role=“collapsible">
<h1>點(diǎn)擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
<div
data-role="collapsible">
<h1>點(diǎn)擊我-我是嵌套的可折疊塊!</h1>
<p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
</div>
</div>
效果圖如下,請(qǐng)制作:
圖1圖2圖34.jQueryMobile
可折疊塊
可折疊集合是將可折疊塊組合在一起(就像手風(fēng)琴一樣)。當(dāng)一個(gè)新的塊被展開時(shí),所有其他的塊都會(huì)被折疊起來。創(chuàng)建若干個(gè)可折疊的內(nèi)容塊,然后把可折疊內(nèi)容塊用帶有data-role="collapsible-set"的新容器包圍起來:4.jQueryMobile
可折疊塊
實(shí)例<div
data-role="collapsible-set">
<divdata-role="collapsible">
<h1>點(diǎn)擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
<divdata-role="collapsible">
<h1>點(diǎn)擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
</div>
4.jQueryMobile
可折疊塊
效果圖如下,請(qǐng)制作:點(diǎn)擊前頁面效果第一項(xiàng)點(diǎn)擊后頁面效果4.jQueryMobile
可折疊塊
通過data-inset屬性取消圓角如何
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年智能制造裝備入股合作協(xié)議范本
- 2024-2030年中國安全鞋內(nèi)鋼包頭市場競爭策略分析及發(fā)展趨勢研究報(bào)告
- 2024年度智能制造設(shè)備融資合作意向協(xié)議書3篇
- 2024-2030年中國反6烯十八酸項(xiàng)目可行性研究報(bào)告
- 梅河口康美職業(yè)技術(shù)學(xué)院《生態(tài)建筑》2023-2024學(xué)年第一學(xué)期期末試卷
- 眉山藥科職業(yè)學(xué)院《建筑室內(nèi)設(shè)計(jì)制圖與識(shí)圖》2023-2024學(xué)年第一學(xué)期期末試卷
- 2024年版公司股份轉(zhuǎn)讓及業(yè)務(wù)重組專項(xiàng)合同版B版
- 馬鞍山學(xué)院《鄉(xiāng)鎮(zhèn)總體規(guī)劃》2023-2024學(xué)年第一學(xué)期期末試卷
- 2024年度水暖電消防設(shè)施改造與節(jié)能降耗服務(wù)合同2篇
- 2024年小學(xué)三年級(jí)數(shù)學(xué)(北京版)-簡單分?jǐn)?shù)的加減法-3學(xué)習(xí)任務(wù)單
- 前蘇聯(lián)卡巴列夫斯基的g小調(diào)大提琴協(xié)奏曲藝術(shù)探究
- 在小學(xué)語文課堂教學(xué)中如何滲透孝道教育研究
- 《2021國標(biāo)暖通圖集資料》96K150-3 圓錐形風(fēng)帽
- 大班幼兒告狀行為的現(xiàn)狀及解決策略學(xué)前教育專業(yè)
- 煤礦井下放炮請(qǐng)示匯報(bào)制度范本
- 常見織帶花鏈的排法和穿棕方法
- 拜太歲科儀.doc
- 【公開課】課件——小班數(shù)學(xué)活動(dòng)《青蛙跳荷葉》
- 趕工措施施工方案(完整版)
- 犬腎衰竭的診斷和治療
- 實(shí)驗(yàn)二十八 實(shí)驗(yàn)設(shè)計(jì)——食醋中總酸度的測定
評(píng)論
0/150
提交評(píng)論