jQuery Mobile 翻頁效果

jQuery Mobile 會自動導入特定動畫效果以支援換頁的視覺變化,透過屬性設定可輕易轉換,這篇簡單的來看看 ~~

jQuery/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/jQuery Mobile 技術文件 》(持續新增中…)