jQuery Mobile 開發中常見的問題

目錄

1. 頁面縮放顯示問題
2. 頁面跳轉後樣式丟失js失效
3. 跳轉時重複調用pageinit方法的解決辦法
4. 如何調用loading效果

 

1頁面縮放顯示問題

問題描述：

頁面彷佛被縮小了，屏幕太寬了。

解決辦法：

在head標籤內加入：

<meta name="viewport" content="width=device-width, initial-scale=1">

 

2 頁面跳轉後樣式丟失js失效

問題描述：

用ajax跳轉的時候，從a.html跳轉到b.html後，b.html的css以及js都失效了。

解決辦法①：

若是想在頁面加載時運行JavaScript，需在A標籤中加data-ajax="false"

解決辦法②：

用JS代替鏈接跳轉 <a href="javascript:location.href='register.aspx'" data-role="button" data-inline="true" data-theme="c">會員註冊</a>

解決辦法③：

將當前頁面須要用到的css以及js放在data-role="page"的div內。

原理：

jQuery.Mobile默認採用ajax的方式載入一個目標連接頁面。因爲jqm的ajax跳轉，只會把目標頁中data-role="page"內的內容加載進DOM,而data-role="page"之外的代碼都不會加載，因此致使在data-role="page"外的js和css都失效了。

3 跳轉時重複調用pageinit方法的解決辦法

問題描述：

用ajax跳轉的時候，從a.html跳轉到b.html，用從b.html返回a.html等等這種反覆跳轉的時候，pageinit方法內的代碼會調用屢次。

解決辦法：

在page中加入 data-dom-cache="true"屬性，如：

<div data-role="page" id="myPage" data-dom-cache="true">

而後把pageinit方法換爲pageshow,如：

$("#myPage").live("pageshow", function() {
//...do something
});

 

4 如何調用loading效果

js代碼：

//顯示loading
function showLoading(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", "加載中..." );
} 
//隱藏loading
function hideLoading(){
$.mobile.hidePageLoadingMsg();
}