版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
使用表格和CSS漸變來格式化內(nèi)容(第十講)知識回顧如何制作內(nèi)置列表?如何制作列表分割線?如何制作計數(shù)泡?如何制作拆分按鈕列表?教學內(nèi)容
jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊
重點、難點重點jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊難點jQueryMobile布局網(wǎng)格自定義網(wǎng)格多行可折疊塊1.jQueryMobile布局網(wǎng)格
QueryMobile提供了一套基于CSS的分列布局。然而,在移動設備上,由于考慮手機的屏幕寬度狹窄,一般不建議使用分欄分列布局。但有時您想要將較小的元素(如按鈕或導航標簽)并排地排列在一起,就像是在一個表格中一樣。這種情況下,推薦使用分列布局。網(wǎng)格中的列是等寬的(合計是100%),沒有邊框、背景、margin或padding。
1.jQueryMobile布局網(wǎng)格
這里有四種布局網(wǎng)格可供使用:在列容器內(nèi),子元素擁有的class為ui-block-a|b|c|d|e取決于列數(shù)。列會浮動并排。
實例1:class為ui-grid-a(兩列布局),您必須指定ui-block-a和ui-block-b的兩個子元素。
實例2:class為ui-grid-b(三列布局),則必須添加ui-block-a、ui-block-b和ui-block-c的三個子元素。
網(wǎng)格類列列寬對應實例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)格
下面是三列布局。效果圖如下,請制作:
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)格
下面是三列布局。效果圖如下,請制作:
2.自定義網(wǎng)格
您也可以通過使用內(nèi)嵌樣式來自定義塊:<divclass="ui-block-a"style="border:1pxsolidblack;"><span>Text..</span></div>
3.多行
在列中也可以有多個行。注意:ui-block-a-class總是創(chuàng)建一個新行。實例如下:<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.多行
效果圖如下,請制作:
4.jQueryMobile
可折疊塊
可折疊塊允許您隱藏或顯示內(nèi)容-對于存儲部分信息很有用。如需創(chuàng)建一個可折疊的內(nèi)容塊,需要為容器添加data-role=“collapsible”屬性。在容器(div)內(nèi),添加一個標題元素(H1-H6),后跟您想要進行擴展的HTML標記。實例如下:4.jQueryMobile
可折疊塊
實例<div
data-role="collapsible">
<h1>點擊我-我可以折疊!</h1>
<p>我是可折疊的內(nèi)容。</p>
</div>4.jQueryMobile
可折疊塊
效果圖如下,請制作:點擊前頁面效果點擊后頁面效果4.jQueryMobile
可折疊塊
默認情況下,內(nèi)容是被折疊起來的。如需在頁面加載時展開內(nèi)容,請使用data-collapsed=“false”。效果圖如下,請制作:點擊前頁面效果點擊后頁面效果4.jQueryMobile
可折疊塊
嵌套可折疊塊可折疊的內(nèi)容塊是可以彼此嵌套的。實例<div
data-role=“collapsible">
<h1>點擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
<div
data-role="collapsible">
<h1>點擊我-我是嵌套的可折疊塊!</h1>
<p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
</div>
</div>
效果圖如下,請制作:
圖1圖2圖34.jQueryMobile
可折疊塊
可折疊集合是將可折疊塊組合在一起(就像手風琴一樣)。當一個新的塊被展開時,所有其他的塊都會被折疊起來。創(chuàng)建若干個可折疊的內(nèi)容塊,然后把可折疊內(nèi)容塊用帶有data-role="collapsible-set"的新容器包圍起來:4.jQueryMobile
可折疊塊
實例<div
data-role="collapsible-set">
<divdata-role="collapsible">
<h1>點擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
<divdata-role="collapsible">
<h1>點擊我-我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
</div>
4.jQueryMobile
可折疊塊
效果圖如下,請制作:點擊前頁面效果第一項點擊后頁面效果4.jQueryMobile
可折疊塊
通過data-inset屬性取消圓角如何
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 1《秋天》第二課時(教學設計)-2023-2024學年統(tǒng)編版語文一年級上冊
- Unit 5 Daily Activities Part B (教學設計)-2024-2025學年閩教版英語四年級上冊
- 標書綜合說明
- 2022年黑龍江雞西中考滿分作文《強者笑對挫折》
- 2022年貴州黔東南中考滿分作文《聲音》4
- 2022年廣西百色中考滿分作文《養(yǎng)成良好習慣的廣播稿》
- 1感受生活中的法律 第二課時 教學設計-2024-2025學年道德與法治六年級上冊統(tǒng)編版
- 2024-2025學年學年高中英語 Unit2 Robot教案 新人教版選修7
- 《兩位數(shù)加兩位數(shù)口算》(教案 )人教版二年級上冊數(shù)學
- 《12 有趣的泥塑》教學設計-2023-2024學年三年級下冊綜合實踐活動長春版
- X管道工程設計承包商投標文件
- (正式版)HGT 4148-2024 工業(yè)用三正丙胺
- 貨物產(chǎn)品采購供貨投標服務方案
- 企業(yè)交通安全責任書范文(2篇)
- GB/T 43781-2024信息技術系統(tǒng)間遠程通信和信息交換視聯(lián)網(wǎng)系統(tǒng)要求
- 公路法知識培訓課件
- (高清版)DZT 0331-2020 地熱資源評價方法及估算規(guī)程
- 四季酒店客房培訓資料
- 留任干部計劃書
- 企業(yè)流程管理制度(標準版)
- 校園欺凌隱患排查記錄表臺賬范例
評論
0/150
提交評論