jQuery Mobile 過渡


jQuery Mobile 包含 CSS3 效果讓您選擇頁面打開的方式。


jQuery Mobile 頁面切換效果

jQuery Mobile 提供了各種頁面切換到下一個頁面的效果。

注意:為了實現頁面切換效果,流覽器必須支持 CSS3 3D 切換:

12.0 10.0 16.0 4.0 15.0

表格中的數字為支持 3D 旋轉的最小流覽器版本號。

頁面過渡效果可被應用於任何使用 data-transition 屬性的鏈接或表單:

頁面切換效果可被應用於任何使用 data-transition 屬性的鏈接或表單提交:

<a href="#anylink" data-transition="slide">切換到第二個頁面</a>

下麵的表格顯示了通過使用 data-transition 屬性後可用的頁面切換:

過渡 描述 頁面 對話框
fade 默認。淡入到下一頁
flip 從後向前翻轉到下一頁
flow 拋出當前頁,進入下一頁
pop 像彈出窗口那樣轉到下一頁。
slide 從右向左滑動到下一頁。
slidefade 從右向左滑動並淡入到下一頁。
slideup 從下到上滑動到下一頁。
slidedown 從上到下滑動到下一頁。
turn 轉向下一頁。
none 無過渡效果。

lamp 在 jQuery Mobile 的所有鏈接上,默認使用淡入淡出的效果(如果流覽器支持)。

提示:上面的所有效果支持後退行為。例如,如果您想要頁面從左向右滑動,而不是從右向左滑動,請使用帶有 "reverse" 值的 data-direction 屬性。在後退按鈕上這是默認的。

實例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切換</a>