jquery mobile开发中常见的问题

推荐 一个JQuery Mobile 学习网站：http://www.lampweb.org/

1页面缩放显示问题

问题描述：

页面似乎被缩小了，屏幕太宽了。

解决办法：

在head标签内加入：

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

2 页面跳转后样式丢失js失效

问题描述：

用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。

解决办法：

1、将当前页面需要用到的css以及js放在<page>div内。

原理：

由于jqm的ajax跳转的时候，只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载，所以导致在<page>外的js和css都失效了。

2、如果想在页面加载时运行JAVASCRIPT，需在A标签中加data-ajax="false".

3、在a标签上加上 target="_top"，使用这个方法后，JS有效，但有得必有失啊，使用这个方法的缺点是JQM原生提供的转场效果不再有效。

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();
}