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

Hi!各位朋友大家好,我是小蔡老師,在上次的單元已經簡單地將頁面內容頁的製作說明完畢這次進階一點講述內容頁的變換制作方法分為“對話方塊”與“轉場特效”

1.我們先回到產品頁面的位置尋找連結點的語法直接加入
data-rel="dialog"
如此一來對話方塊就完成
001

2.直接測試一下,你會發現原本我們所制作的語法有上一頁,此時需要回到子內頁設計內去刪除此語法,對方方塊會自動新增一個消除符號就能直接回到上一頁。
002

3.直接刪除此段語法
004

4.再度測試,如此一來對話方塊即完成
003

5.新增轉場效果,回到產品連結頁的語法位置

data-transition="slide" “slideup” "slidedown" "pop" "fade" "flip"

翻譯對照:新增頁面轉場效果:滑動 向上滑動 向下滑動 彈出 淡出 翻頁效果
005

效果對照參考:https://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問