请使用firefox,chrome等最新浏览器浏览本站。

Jquery mobile新手问题总汇 一

js+jquery 阿豹 378次浏览 0个评论 扫描二维码
jquerymobile官网http://jquerymobile.com
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();
}
5 动态改变了list的内容,但是内容并没有变化

解决办法:

调用组件的refresh方法,刷新list,如:

$("#contentList").append(content).listview('refresh');

原理:

jqm组件的显示原理是把原始的web组件隐藏,而用jqm自定义的UI组件来代替原始的web组件显示。动态的改变了list的值,其实改变的是原始组件list的值,而jqm的list组件的值并没有被更新,所以需要调用list组件的refresh方法来使其更新并显示。

注意:

此问题不只局限于list组件,基本所有的jqm UI组件在改变值之后都需要调用组件对应的refresh方法,例如button组件( $(‘#id’).button(‘refresh’) )等等。更多刷新方法请查看:jquery mobile各类组件刷新方法

 

6 把所有内容放到一个页面好,还是分开多页面好?

对于这个问题,说说笔者的个人见解:
#1所有内容放到同一页面
#2分页面存放内容
对于#1,如果是比较简单的网页内容,可以考虑把内容都放在同一个页面。但是如果页面结构很复杂,跳转页面比较多的话,那#1就会显得很臃肿,增加维护的复杂度。
而#2比较适合页面结构以及页面比较多的情况,易维护。
性能方面,笔者查了一些资料,也亲自做了些实验,并没有发现性能上的明显差异。
结论:根据个人编码习惯,两种选择都是可以的。推荐#1和#2混合使用。

 


喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到