jQuery Mobile #2 切換頁面的特效處理

jQuery 只是 plugin 但是 jQuery Mobile 是 Framework ,他在一引用的時候就自動幫你擋掉所有 A.Link 的動作,就是要你照他的規矩來玩。也有內建很多效果在 A.Link 切換頁面的時候來展現。雖然說效果不比 Sencha Touch 或是其他的 Mobile js Framework ,但是 jQuery Mobile 強調的就是多支援,支援度絕對沒有別家比得上,不用再花很多時間去調整各家瀏覽器、各家 OS 還有各家 OS 上的不同瀏覽器,講到舌頭都打結就知道支援度是多麼可怕的東西。

data-transition

<a href="index.html" data-transition="pop">彈出效果</a>

jQuery Mobile 利用 data-transition 來設定不同的效果,有 slide , slideup ,slidedown ,pop ,fade ,flip 都只要設定上去就可以看到效果了。

<a href="/index.html" data-transition="reverse slide" class="上一頁">

Slide 預設是由右方滑入,如果想做左邊一頁的話就是要設定為 reverse slide 。非常貼心的一點是,當套用效果切換頁面的時候,這時候回上一頁也會使用反向的效果來顯示。

data-rel=”dialog”

<a href="/index.html" data-rel="dialog">

設定 dialog 的情況下,連結頁面會用彈出的來顯示,而且彈出不會記錄在瀏覽器的 history 裡面,上下頁就不會切到彈出這頁。

rel=”external”

<a href="/index.html" rel="external">

如果連結的位置是由 http://||https:// 開頭,jQuery Mobile 就不會幫你做任何處理,直接開啟新頁面。但是如果在內部連結可是也不想要 jQuery Mobile 做什麼事的話,就加上 rel=”external” ,假設說新頁面沒有依照 jQuery Mobile 的 Html 規範走的就必須加上,不然再 ajax loading 的時候就會因為判讀不正常出現 error。


http://jquerymobile.com/test/docs/pages/page-transitions.html

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *