2015年3月14日 星期六

jQuery Mobile - Transition

jQuery Mobile提供Transition轉場效果,轉場效果是針對瀏覽頁面時,為了強調頁面之間的差異,並突顯頁面內容,所加入的切換效果。jQuery Mobile的Transition轉場效果除了可用於頁面間切換之外,亦可用於顯示對話框 (Dialog)。

jQuery Mobile提供以下的轉場效果:

屬性 轉場效果
data-transition="fade" 淡入淡出
data-transition="flip" 反轉
data-transition="flow" 流動
data-transition="pop" 突顯
data-transition="slide" 滑動
data-transition="slidedown" 向下滑動
data-transition="slidefade" 淡入淡出滑動
data-transition="slideup" 向上滑動
data-transition="turn" 旋轉

使用上相當簡單,分別由以下屬性設定,欲處理對話框的切換效果,只需額外加上data-rel="dialog"屬性:
  • 頁面間切換:data-transition="..."。
  • 顯示對話框:data-rel="dialog" data-transition="..."。
以下範例以淡入淡出效果切換頁面:

以下範例以滑動效果顯示對話框:

是不是很簡單呢?

【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com

© Chia-Hui Huang

沒有留言:

張貼留言