jQuery Mobile 开发中常见的问题

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

 

posted @ 2015-01-11 14:59 Mr.Leo 阅读(...) 评论(...) 编辑 收藏