jQuery Mobile 過渡
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 | 無過渡傚果。 | 嘗試一下 | 嘗試一下 |
在 jQuery Mobile 的所有鏈接上,默認使用淡入淡出的傚果(如果瀏覽器支持)。 |
提示:上面的所有傚果支持後退行為。例如,如果您想要頁面從左向右滑動,而不是從右向左滑動,請使用帶有 "reverse" 值的 data-direction 屬性。在後退按鈕上這是默認的。