【手機網頁入門實做】jQueryMobile入門 – 摺疊內容 (下)

Hi!各位朋友大家好,我是小蔡老師,在這次摺疊內容的最後一篇主要是說明如何直接用語法將想要附注的內容用摺疊區塊來整理,跟以往需要跳到下一頁的內容有所不同。

1.首先我們先至 主選單→關於的選項,先準備如下面你想要摺疊的內容或說明,這邊已經做過很多次了就不另外說明,不是很瞭解者請往前面單元觀看謝謝!
001

2.基本測試結果呈現如下
002

3.在想要摺疊的位置加入折疊的基本語法

涵蓋內容


003

4.測試結果
004_1004_2
此為基本應用的折疊內容

1.巢狀折疊塊

5.折疊塊用法除了最基本的用div區塊去區分成多項如下
a.
005

b.
006

6.更進一步我們可以在折疊內容內新增額外的小區塊讓您想闡述的內容更容易觀看,這邊會針對小區塊去做出巢狀語法

<div data-role="collapsible" data-collapsd="true">小區塊內容</div>

007

測試後呈現效果:
008

2.折疊塊組合

7.當呈現效果如上述相信有很多朋友會覺得區間過大或者分隔跟一般有所不同,此時會直接做成一個分格按鈕塊整合成一個

涵蓋內容


附註:折疊塊組合很多朋友很喜歡直接用外包的方式,但是在這邊已經使用巢狀方式需要另外建立一個新折疊塊div區塊
不然會直接取消第一指令折疊塊分割的語法如下
009

010

8.書寫將次級折疊塊包覆在內
011

最終測試結果:
012

呼!終於把所有的摺疊內容說明完畢!下次繼續講述如何制作表單=>訂單,希望大家會喜歡呦!有空幫個忙在FB按個讚增加人氣呦!!!
(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問