JQuery Mobile是一個基于jQuery庫的用戶界面框架,專注于為移動設備提供友好的界面。在它的頁面切換功能中,我們可以使用$.mobile.changePage()函數來實現頁面之間的平滑過渡。
該函數有以下可選參數:
function( page, options )
其中,page參數表示切換到的頁面。有3種方式指定頁面:
1. 直接指定目標頁面的ID 2. 傳入一個jQuery對象,表示包含目標頁面的DOM元素 3. 字符串表示目標頁面的URL(會用ajax加載并插入DOM)
而options參數用于配置切換的動畫效果,其可選屬性如下:
changeHash(布爾類型,默認為true):是否在URL中添加Hash參數 data (多種類型):附加在切換后的頁面的數據,可以通過toPage.data('key')訪問 reloadPage (布爾類型,默認為false):是否重新加載目標頁面 showLoadMsg (布爾類型,默認為true):是否顯示等待加載信息 transition (字符串,默認為"data-transition"屬性值或"slide"):切換效果 reverse (布爾類型,默認為false):切換方向是否反向 allowSamePageTransition (布爾類型,默認為false):是否允許目標頁面與當前頁面相同 role (字符串,默認為"page"):目標頁面的角色
以切換到目標頁面ID為例,下面是一個示例代碼:
$.mobile.changePage("#page2", { transition: "slide", reverse: false });
該代碼將以平滑滑動的方式,從當前頁面切換到ID為"page2"的目標頁面??梢愿鶕枰?,自由選擇其他方式和配置以實現自己想要的效果。