【技术】jQuery mobile问题

原文http://www.mansonchor.com/blog/blog_detail_62.html

1.页面转场闪屏问题

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

1 2 3 4 5 6

/* fixed闪屏 */ .ui-page {       backface- visibility : hidden ;       -webkit-backface- visibility : hidden ; /* Chrome and Safari */       -moz-backface- visibility : hidden ; /* Firefox */  }

须要注意的是你的jquery最好使用 1.7.1或以上的版本，不然有上面的css也可能仍是会闪屏。

1.7版的jquery加多了对CSS3的支持和兼容，能够说是为移动端而设计的。

 

2.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去实现的效果，建议你仍是和设计师们谈谈吧。不然你将会面临痛苦的兼容问题。

 

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

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

单页就是你在一个 html页面里面把全部须要用到的page都写在里面了，这个时候页面之间的转场一个能够靠 a标签里的href，里面是想要转到页面的ID

1	< a href = "#page_id" ></ a >

单页里面写到的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" 一属性

1 2 3

< div data-role = "page" data-dom-cache = "true" >     page内容 </ div >

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

1 2 3

$( '#page_id' ).bind( 'pageshow' , function (){      //页面每次显示你须要作的 })

除了pageshow，还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应，都是能够针对不一样的需求使用的。

 

4.更多jQuery mobile问题，见：

http://www.wglong.com/main/artical!details?id=4#q10