一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery mobile插件使用心得笔记

时间:2013-07-01 编辑:简简单单 来源:一聚教程网

jquery mobile是一个好框架,虽然我没用过Sencha Touch,但据说学习成本要比jq mobile大很多,从目前web app ui框架选择少的情况来看,jq mobile是最好的选择。

jquery本身已是一个成熟的框架,jq mobile作为它的附属,继承了 write less,do more 的传统。

但是作为一个新兴起的项目,毛病也是有不少。我在运用到项目中时,发现了如下问题并积累了下解决方法。

 

1.页面转场时,当前页会先回到顶部,再跳转到目标页

相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。

这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种seo/seo.html" target="_blank">搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。

所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。


2.页面转场闪屏问题

在页面转场时,页面内容经常会闪动,特别对于slide效果,fade的话没那么严重但也还是会觉察到闪动。这对于用户体验是致命伤,原因是手机浏览器对于css3的支持还不算太好。解决的方法就是让页面转场效果进行的时候,先将内容背景隐藏,加上下面的一段CSS


需要注意的是你的jquery最好使用 1.7.1或以上的版本,否则有上面的css也可能还是会闪屏。

 代码如下 复制代码
/* fixed闪屏 */
.ui-page {  
    backface-visibility: hidden;  
    -webkit-backface-visibility: hidden; /* Chrome and Safari */ 
    -moz-backface-visibility: hidden; /* Firefox */ 
}

 

1.7版的jquery加多了对CSS3的支持和兼容,可以说是为移动端而设计的,假如你正在开发web app,有什么理由不用它呢?

 

3.position fixed问题

jquery mobile在1.1.0版本之前,是无法真正实现fixed效果的,在header使用fixed的时候,拖动页面你会看到header一闪一闪的跟下来,这实际是使用js实现header置顶的。

1.1.0版推出后,jquery mobile声称他们真正的实现了header fixed,确实从外观效果来看,是和fixed无异了,我们也用得很爽。

但在这里我要说明了,真正意义的css  position:fixed,只有在IOS 5才支持,IOS 4和android各版本的浏览器都是不支持的(其它手机操作系统的浏览器我没试过)。这就跟IE6对position:fixed的情况类似的。jquery mobile能够把header和footer做成fixed是它本身框架的UI功能,并非解决了浏览器的兼容问题。

所以如果你正在做一个项目,设计里面有很多需要fixed去实现的效果,建议你还是和设计师们谈谈吧。否则你将会面临痛苦的兼容问题,我是有深深的感受阿。

 

4.页面page控制、缓存问题

jquery mobile的页面机制主要分两种,一是单页,而是多页。

单页就是你在一个 html页面里面把所有需要用到的page都写在里面了,这个时候页面之间的转场一个可以靠 a标签里的href,里面是想要转到页面的ID

 

 代码如下 复制代码

单页里面写到的page都会一直存在于dom中,所以不存在缓存的问题,页面转换时也不需要ajax去获取新加载页面的内容。缺点就是当需求比较多时,在一个html页面写完整个app需要的page和相应的js,页面会显得臃肿而且不好维护。

那么我们更多的是使用多页的机制,把每个page独立写到不同的html页面里,在需要转到对应页面时,才通过ajax去获取页面的内容和js,这样使我们的app代码部署就如我们网站开发一样,一个页面一个html文件。

这样就会存在一个问题,因为每个page不像单页一样写在一起,jquery mobile的机制只会把需要显示的page加载到dom里面,当离开这个page时,会自动把这个page的dom清除掉,假如你想要保留这个page在dom里,以后再次显示,需要加上 data-dom-cache="true" 一属性

 代码如下 复制代码

    page内容

 

解决了page缓存的问题,那么又会遇到page里的js问题。例如我希望把page的dom缓存下来,但是我又希望每次这个page显示的时候,触发执行一些js,那么这个时候我们在对应page的事件处理时,就不能用 pageinit而是要用pageshow了,因为pageinit只在这个page从dom加载进来时触发,如果page缓存了,那么pageinit只会在第一次时触发。

 

 代码如下 复制代码
$('#page_id').bind('pageshow',function(){
    //页面每次显示你需要做的
})

除了pageshow,还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应,都是可以针对不同的需求使用的。

热门栏目