JQuery Mobile框架使用技巧几则打赏
个人认为,JQuery Mobile是一个非常好的框架,虽然我暂时没接触过Sencha Touch,但据说学习成本要比JQuery Mobile大很多,从目前Web应用UI框架选择少的情况来看,JQuery Mobile是最好的选择了。
JQuery本身就已经是一个成熟的框架了,JQuery Mobile作为它的附属品,继承了write less,do more的传统。但是作为一个新兴起的项目,毛病也是有不少。以下是一些常见问题的解决小技巧,希望做移动Web应用的朋友能用得着。
1.页面跳转时,当前页会先回到顶部,再跳转到目标页
相信在JQuery Mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,JQuery Mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改JQuery Mobile的源码(但效果不好),折磨了一段时间后,迎来了JQuery Mobile的更新,然后1.1.0版本解决了这个问题,具体问题所在,也不再追究了。所以如果还被这个问题困扰的同学们,赶紧去下新版的JQuery Mobile。
2.页面跳转时闪屏问题
在页面跳转时,页面内容经常会闪动,特别对于slide效果,fade的话没那么严重但也还是会觉察到闪动。这对于用户体验是致命伤,原因是手机浏览器对于css3的支持还不算太好。解决的方法就是让页面跳转效果进行的时候,先将内容背景隐藏,加上下面的一段CSS
/* 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的支持和兼容,可以说是为移动端而设计的,假如你正在开发移动Web应用,有什么理由不用它呢?
3.Tab选择之后back不能恢复原始状态问题
在几个均有导航的页面如果其中有一个页面有Tab页面,选择非默认的之后,返回上一个页面,之后在回来,没有采用默认的那个tab选中并改变默认颜色。可以采用如下代码:ui-btn-active表示选中样式
html:
<!-- header --> <div data-role="header" data-position="fixed"> <a data-icon="arrow-l" data-Iconpos='left' data-rel="back">返回</a> <h1>属性管理</h1> <div data-role="navbar" data-grid="a"> <ul class="menuMain"> <li id="1"><a id="TypeURL" href="#" class="ui-btn-active">类型</a></li> <li id="2"><a id="areaURL" href="#">区域</a></li> </ul> </div> <!-- /navbar --> </div>
js:
if(tabId=="1"){ //类型 $("#content-first").css("display","block"); $("#content-second").css("display","none"); divId="#content-first"; $("#TypeURL").addClass("ui-btn-active"); $("#areaURL").removeClass("ui-btn-active"); queryURL=AssertAttrWSURL.queryAllAssetType+"/"+stationCode+"/"+pageNum; }else if(tabId=="2"){ //区域 $("#content-first").css("display","none"); $("#content-second").css("display","block"); divId="#content-second"; $("#TypeURL").removeClass("ui-btn-active"); $("#areaURL").addClass("ui-btn-active"); queryURL=AssertAttrWSURL.queryAllArea+"/"+stationCode+"/"+pageNum; }
js中引号因wordpress编辑器缘故自动转换为全角,仅供参考
4.特殊情况下选中相关问题连接没有加载
解决的方案有两种:
a.采用非ajax调用(data-ajax='false',rel="external" , data-ajax="false" )
b.采用同一个页面多个page模式,采用pageshow加载并初始化。
- 固定链接:https://www.poorren.com/jquery-mobile-tech
- 文章标签:jquery,JQuery Mobile,Mobile,web,应用,移动
- 扫二维码:JQuery Mobile框架使用技巧几则
- 版权所有:除"转载分享"分类外,未经注明,均为原创、整理,转载请注明出处。
rel=”external” 放在a标签里,页面跳转链接外部 就好了耶
ie低版本留言体验还是不好啊,多说插件么?
没办法,快要淘汰的东西了。
也是哦。呵呵
ie低版本留言体验还是不好啊,多说插件么?
没办法,快要淘汰的东西了。
也是哦。呵呵
现在速度提升不少啊
还行吧。
现在速度提升不少啊
还行吧。
不错的。
不错的。
支持博主来了。
支持博主来了。
代码高亮换了么?以前不死这样的,现在这样还不错,比以前养眼点,呵呵
嗯,禁用了插件,自己把关键代码写函数里了。
代码高亮换了么?以前不死这样的,现在这样还不错,比以前养眼点,呵呵
嗯,禁用了插件,自己把关键代码写函数里了。
学习了。这个还不错
学习了。这个还不错
看完了,没接触过这块的东西,表示看的很吃力啊
又换名字了?
是呀,这个也被你发现了
看完了,没接触过这块的东西,表示看的很吃力啊
又换名字了?
是呀,这个也被你发现了
看完还是不懂啊
看完还是不懂啊
学习了~博主貌似每天都有更啊,很勤的说—很感人!我很少推荐关于爱情的图文视频,但这两部真的很感人,特别是第一部,可能很多人已经看过了,但再看一两遍也不多,没看过的抽时间看看吧。《让爱飞》(Lostlove2011)、《缘来逝你》(LoveC++2012)http://www.sve.com.cn/dv.asp
不经常看电影了,有时间去看看
学习了~博主貌似每天都有更啊,很勤的说
http://www.sve.com.cn/dv.asp
—
很感人!我很少推荐关于爱情的图文视频,但这两部真的很感人,特别是第一部,可能很多人已经看过了,
但再看一两遍也不多,没看过的抽时间看看吧。《让爱飞》(Lostlove2011)、《缘来逝你》(LoveC++2012)
不经常看电影了,有时间去看看
博主更文更得很勤啊
最近没事,就整天更新了。
博主更文更得很勤啊
最近没事,就整天更新了。
我是不是在hostloc上见过你?
我哪知道。你hostloc上叫啥额?
我是不是在hostloc上见过你?
我哪知道。你hostloc上叫啥额?