【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

jQuery Mobile 翻頁效果

jQuery Mobile 技術文件系列

在  jQuery Mobile 虛擬頁面 這篇裏面,談到了 jQuery Mobile 的多頁設計,而當多個虛擬頁面進行切換時,jQuery Mobile 會自動導入特定動畫效果以支援換頁的視覺變化,你可以透過 data-transition 屬性的設定,調整所使用的換頁動畫。以下列舉可用的屬性值:

屬性值
說明
slide
從右到左,或是從左到右的滑動動畫。
slideup
從下到上的動畫。
slidedown
從上到下的動畫。
slidefade
滑動合併淡出淡入動畫。
pop
以最小化的外觀於畫面中央出現,直到佔滿螢幕。
fade
淡出淡入,新舊畫面交錯出現。
flip
模擬旋轉動畫。
flow
縮小畫面再滑出目前位置。
turn
由遠到近翻頁進入呈現。
none
不套用動畫。

屬性值的設定語法如下:

<a href="#b" data-transition="slide" >
    // 頁面內容 …
</a>

如你所見, data-transition 屬性必須在連結上作設定,如此一來,動畫會在此連結啟動時發生作用,請者請參考  jQuery Mobile 虛擬頁面 其中的範例,逐一加上 data-transition 屬性,測試不同屬性值的效果。

jQuery Mobile 技術文件系列

沒有留言: