?
本文檔使用 PHP中文網(wǎng)手冊(cè) 發(fā)布
jQuery Mobile 包含 CSS3 效果讓您選擇頁(yè)面打開(kāi)的方式。
jQuery Mobile 提供了各種頁(yè)面切換到下一個(gè)頁(yè)面的效果。
注意:為了實(shí)現(xiàn)頁(yè)面切換效果,瀏覽器必須支持 CSS3 3D 切換:
頁(yè)面切換效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單提交:
<a?href="#anylink"?data-transition="slide">切換到第二個(gè)頁(yè)面</a>
下面的表格顯示了通過(guò)使用 data-transition 屬性后可用的頁(yè)面切換:
頁(yè)面切換 | 描述 | 嘗試一下 |
---|---|---|
fade | 默認(rèn)。淡入到下一頁(yè) | 實(shí)例? |
flip | 從后向前翻轉(zhuǎn)到下一頁(yè) | 實(shí)例? |
flow | 拋出當(dāng)前頁(yè),進(jìn)入下一頁(yè) | 實(shí)例? |
pop | 像彈出窗口一樣進(jìn)入下一頁(yè) | 實(shí)例? |
slide | 從右到左滑動(dòng)到下一頁(yè) | 實(shí)例? |
slidefade | 從右到左滑動(dòng)并淡入到下一頁(yè) | 實(shí)例? |
slideup | 從下到上滑動(dòng)到下一頁(yè) | 實(shí)例? |
slidedown | 從上到下滑動(dòng)到下一頁(yè) | 實(shí)例? |
turn | 翻到下一頁(yè) | 實(shí)例? |
none | 沒(méi)有切換效果 | 實(shí)例? |
在 jQuery Mobile 的所有鏈接上,默認(rèn)使用淡入淡出的效果(如果瀏覽器支持)。 |
提示:上面的所有效果支持后退行為。例如,如果您想要頁(yè)面從左向右滑動(dòng),而不是從右向左滑動(dòng),請(qǐng)使用帶有 "reverse" 值的 data-direction 屬性。在后退按鈕上這是默認(rèn)的。
<a?href="#pagetwo"?data-transition="slide"?data-direction="reverse">切換</a>效果預(yù)覽 ?