1页面缩放显示问题
问题描述:
页面似乎被缩小了,屏幕太宽了。
解决办法:
在head标签内加入:
<meta name="viewport" content="width=device-width, initial-scale=1">
2 页面跳转后样式丢失js失效
问题描述:
用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了。
解决办法:
将当前页面需要用到的css以及js放在<page>div内。
原理:
由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<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(); }