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

 
 
  1. /* fixed闪屏 */
  2. .ui-page {
  3. backface- visibility : hidden ;
  4. -webkit-backface- visibility : hidden ; /* Chrome and Safari */
  5. -moz-backface- visibility : hidden ; /* Firefox */
  6. }

需要注意的是你的JQuery最好使用 1.7.1或以上的版本,否则有上面的css也可能还是会闪屏。
1.7版的jquery加多了对CSS3的支持和兼容,可以说是为移动端而设计的,假如你正在开发移动Web应用,有什么理由不用它呢?

3.Tab选择之后back不能恢复原始状态问题
在几个均有导航的页面如果其中有一个页面有Tab页面,选择非默认的之后,返回上一个页面,之后在回来,没有采用默认的那个tab选中并改变默认颜色。可以采用如下代码:ui-btn-active表示选中样式
html:

 
 
  1. <!-- header -->
  2. <div data-role="header" data-position="fixed">
  3. <a data-icon="arrow-l" data-Iconpos='left' data-rel="back">返回</a>
  4. <h1>属性管理</h1>
  5. <div  data-role="navbar" data-grid="a">
  6. <ul class="menuMain">
  7. <li id="1"><a id="TypeURL" href="#" class="ui-btn-active">类型</a></li>
  8. <li id="2"><a  id="areaURL" href="#">区域</a></li>
  9. </ul>
  10. </div>
  11. <!-- /navbar -->
  12. </div>

js:

 
 
  1. if(tabId=="1"){ //类型
  2. $("#content-first").css("display","block");
  3. $("#content-second").css("display","none");
  4.  
  5. divId="#content-first";
  6. $("#TypeURL").addClass("ui-btn-active");
  7. $("#areaURL").removeClass("ui-btn-active");
  8.  
  9. queryURL=AssertAttrWSURL.queryAllAssetType+"/"+stationCode+"/"+pageNum;
  10. }else if(tabId=="2"){ //区域
  11. $("#content-first").css("display","none");
  12. $("#content-second").css("display","block");
  13. divId="#content-second";
  14. $("#TypeURL").removeClass("ui-btn-active");
  15. $("#areaURL").addClass("ui-btn-active");
  16. queryURL=AssertAttrWSURL.queryAllArea+"/"+stationCode+"/"+pageNum;
  17. }

js中引号因wordpress编辑器缘故自动转换为全角,仅供参考

4.特殊情况下选中相关问题连接没有加载
解决的方案有两种:
a.采用非ajax调用(data-ajax=’false’,rel=”external” , data-ajax=”false” )
b.采用同一个页面多个page模式,采用pageshow加载并初始化。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值