jQuery Mobile - Slideshow

網路有很多高手提供jQuery Mobile Plugin，此次要介紹的是由Manuel Masia (Pixedelic.com) 所開發的Camera，用於瀏覽相片，Camera會產生如同幻燈片的效果。

Camera可自http://www.pixedelic.com/plugins/camera/ 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