jQuery Mobile 包含 CSS3 效果讓您選擇頁(yè)面打開(kāi)的方式。


jQuery Mobile 頁(yè)面切換效果

jQuery Mobile 提供了各種頁(yè)面切換到下一個(gè)頁(yè)面的效果。

注意:為了實(shí)現(xiàn)頁(yè)面切換效果,瀏覽器必須支持 CSS3 3D 切換:

compatible_chrome.gifcompatible_ie.gifcompatible_firefox.gifcompatible_safari.gifcompatible_opera.gif
12.010.016.04.015.0

表格中的數(shù)字為支持 3D 旋轉(zhuǎn)的最小瀏覽器版本號(hào)。

頁(yè)面過(guò)渡效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單:

頁(yè)面切換效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單提交:

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

下面的表格顯示了通過(guò)使用 data-transition 屬性后可用的頁(yè)面切換:

過(guò)渡描述頁(yè)面對(duì)話(huà)框
fade默認(rèn)。淡入到下一頁(yè)嘗試一下嘗試一下
flip從后向前翻轉(zhuǎn)到下一頁(yè)嘗試一下嘗試一下
flow拋出當(dāng)前頁(yè),進(jìn)入下一頁(yè)嘗試一下嘗試一下
pop像彈出窗口那樣轉(zhuǎn)到下一頁(yè)。嘗試一下嘗試一下
slide從右向左滑動(dòng)到下一頁(yè)。嘗試一下嘗試一下
slidefade從右向左滑動(dòng)并淡入到下一頁(yè)。嘗試一下嘗試一下
slideup從下到上滑動(dòng)到下一頁(yè)。嘗試一下嘗試一下
slidedown從上到下滑動(dòng)到下一頁(yè)。嘗試一下嘗試一下
turn轉(zhuǎn)向下一頁(yè)。嘗試一下嘗試一下
none無(wú)過(guò)渡效果。嘗試一下嘗試一下

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

提示:上面的所有效果支持后退行為。例如,如果您想要頁(yè)面從左向右滑動(dòng),而不是從右向左滑動(dòng),請(qǐng)使用帶有 "reverse" 值的 data-direction 屬性。在后退按鈕上這是默認(rèn)的。

實(shí)例

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

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例