使用表格和CSS漸變來格式化內(nèi)容

1、使用表格和CSS漸變來格式化內(nèi)容（第十講（第十講 ) )知識回顧n如何制作內(nèi)置列表？n如何制作列表分割線？n如何制作計數(shù)泡？n如何制作拆分按鈕列表？教學內(nèi)容njQuery Mobile 布局網(wǎng)格布局網(wǎng)格n自定義網(wǎng)格自定義網(wǎng)格n多行多行n可折疊塊可折疊塊重點、難點n重點pjQuery Mobile 布局網(wǎng)格布局網(wǎng)格p自定義網(wǎng)格自定義網(wǎng)格p多行多行p可折疊塊可折疊塊n難點pjQuery Mobile 布局網(wǎng)格布局網(wǎng)格p自定義網(wǎng)格自定義網(wǎng)格p多行多行p可折疊塊可折疊塊1.jQuery Mobile 布局網(wǎng)格lQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移動設(shè)備上，由于考慮手

2、機的屏幕寬度狹窄，一般不建議使用分欄分列布局。l但有時您想要將較小的元素（如按鈕或?qū)Ш綐撕灒┎⑴诺嘏帕性谝黄?，就像是在一個表格中一樣。這種情況下，推薦使用分列布局。l網(wǎng)格中的列是等寬的（合計是 100%），沒有邊框、背景、margin 或 padding。1.jQuery Mobile 布局網(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-g

3、rid-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.jQuery Mobile 布局網(wǎng)格下面是三

4、列布局。下面是三列布局。效果圖如下，請制作效果圖如下，請制作 ：2.自定義網(wǎng)格通過使用CSS，您可以自定義列塊，如：.ui-block-a, .ui-block-b, .ui-block-c background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px;2.自定義網(wǎng)格下面是三列布局。下面是三列布局。效果圖如下，請制作效果圖如下，請制作 ：2.自定義網(wǎng)格您也可以通過使用內(nèi)嵌樣式來自定義塊：Text.3.多行在列中也可以有多個行

5、。注意：注意：ui-block-a-class 總是創(chuàng)建一個新行。實例如下：實例如下：Some TextSome TextSome TextSome TextSome TextSome Text3.多行效果圖如下，請制作效果圖如下，請制作 ：4.jQuery Mobile 可折疊塊 可折疊塊允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。 如需創(chuàng)建一個可折疊的內(nèi)容塊，需要為容器添添加加 data-role=“collapsible” 屬性。在容器（div）內(nèi)，添加一個標題元素（H1-H6），后跟您想要進行擴展的 HTML 標記。實例如下：4.jQuery Mobile 可折疊塊實例實例點擊我

6、 - 我可以折疊!我是可折疊的內(nèi)容。4. jQuery Mobile 可折疊塊效果圖如下，請制作效果圖如下，請制作 ：點擊前頁面效果 點擊后頁面效果4. jQuery Mobile 可折疊塊 默認情況下，內(nèi)容是被折疊起來的。如需在頁面加載時展開內(nèi)容，請使用 data-collapsed=“false”。效果圖如下，請制作效果圖如下，請制作 ：點擊前頁面效果 點擊后頁面效果4. jQuery Mobile 可折疊塊嵌套可折疊塊嵌套可折疊塊可折疊的內(nèi)容塊是可以彼此嵌套的。實例實例 點擊我 - 我可以折疊! 我是被展開的內(nèi)容。 點擊我 - 我是嵌套的可折疊塊！ 我是嵌套的可折疊塊中被展開的內(nèi)容。 l

7、效果圖如下，請制作效果圖如下，請制作 ：圖1圖2圖34. jQuery Mobile 可折疊塊 可折疊集合是將可折疊塊組合在一起（就像手風琴一樣）。當一個新的塊被展開時，所有其他的塊都會被折疊起來。 創(chuàng)建若干個可折疊的內(nèi)容塊，然后把可折疊內(nèi)容塊用帶有 data-role=collapsible-set 的新容器包圍起來：4. jQuery Mobile 可折疊塊實例實例點擊我 - 我可以折疊！我是被展開的內(nèi)容。點擊我 - 我可以折疊!我是被展開的內(nèi)容。4. jQuery Mobile 可折疊塊效果圖如下，請制作效果圖如下，請制作 ：點擊前頁面效果 第一項點擊后頁面效果4. jQuery Mobile 可折疊塊l通過 data-inset 屬性取消圓角 如何取消可折疊塊上的圓角。l通過 data-mini 屬