JQuery Mobile框架使用技巧几则

JQuery Mobile框架使用技巧几则 打赏

分类：编程代码 | 2012-07-26 1:07:35 | 浏览(23,659)

个人认为，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框架使用技巧几则

JQuery Mobile框架使用技巧几则

微信打赏
支付宝打赏

已有43条评论

我就这个调调
rel=”external” 放在a标签里，页面跳转链接外部就好了耶

2013-03-12 14:20 回复
虎哥
ie低版本留言体验还是不好啊，多说插件么？

2012-07-27 22:10 回复
- 朴人博客
  没办法，快要淘汰的东西了。
  
  2012-07-27 22:12 回复
  - 韩武
    也是哦。呵呵
    
    2012-07-27 22:15 回复
虎哥
ie低版本留言体验还是不好啊，多说插件么？

2012-07-27 22:10 回复
- 朴人博客
  没办法，快要淘汰的东西了。
  
  2012-07-27 22:12 回复
  - 韩武
    也是哦。呵呵
    
    2012-07-27 22:15 回复
路人甲
现在速度提升不少啊

2012-07-27 22:08 回复
- 朴人博客
  还行吧。
  
  2012-07-27 22:12 回复
路人甲
现在速度提升不少啊

2012-07-27 22:08 回复
- 朴人博客
  还行吧。
  
  2012-07-27 22:12 回复
虎哥
不错的。

2012-07-27 22:07 回复
虎哥
不错的。

2012-07-27 22:07 回复
小勇
支持博主来了。

2012-07-27 22:06 回复
小勇
支持博主来了。

2012-07-27 22:06 回复
琳琳
代码高亮换了么？以前不死这样的，现在这样还不错，比以前养眼点，呵呵

2012-07-27 22:05 回复
- 朴人博客
  嗯，禁用了插件，自己把关键代码写函数里了。
  
  2012-07-27 22:13 回复
琳琳
代码高亮换了么？以前不死这样的，现在这样还不错，比以前养眼点，呵呵

2012-07-27 22:05 回复
- 朴人博客
  嗯，禁用了插件，自己把关键代码写函数里了。
  
  2012-07-27 22:13 回复
小杰
学习了。这个还不错

2012-07-27 22:04 回复
小杰
学习了。这个还不错

2012-07-27 22:04 回复
即时比分
看完了，没接触过这块的东西，表示看的很吃力啊

2012-07-27 16:10 回复
- 朴人博客
  又换名字了？
  
  2012-07-27 16:37 回复
  - 即时比分
    是呀，这个也被你发现了
    
    2012-07-28 12:41 回复
即时比分
看完了，没接触过这块的东西，表示看的很吃力啊

2012-07-27 16:10 回复
- 朴人博客
  又换名字了？
  
  2012-07-27 16:37 回复
  - 即时比分
    是呀，这个也被你发现了
    
    2012-07-28 12:41 回复
珠宝招聘
看完还是不懂啊

2012-07-26 16:59 回复
- 朴人博客
  
  2012-07-26 17:16 回复
珠宝招聘
看完还是不懂啊

2012-07-26 16:59 回复
- 朴人博客
  
  2012-07-26 17:16 回复
缘来逝你
学习了~博主貌似每天都有更啊，很勤的说—很感人！我很少推荐关于爱情的图文视频，但这两部真的很感人，特别是第一部，可能很多人已经看过了，但再看一两遍也不多，没看过的抽时间看看吧。《让爱飞》(Lostlove2011)、《缘来逝你》(LoveC++2012)http://www.sve.com.cn/dv.asp

2012-07-26 14:47 回复
- 朴人博客
  不经常看电影了，有时间去看看
  
  2012-07-26 16:27 回复
缘来逝你
学习了~博主貌似每天都有更啊，很勤的说
—
很感人！我很少推荐关于爱情的图文视频，但这两部真的很感人，特别是第一部，可能很多人已经看过了，
但再看一两遍也不多，没看过的抽时间看看吧。《让爱飞》(Lostlove2011)、《缘来逝你》(LoveC++2012)
http://www.sve.com.cn/dv.asp

2012-07-26 14:47 回复
- 朴人博客
  不经常看电影了，有时间去看看
  
  2012-07-26 16:27 回复
篮球比分
博主更文更得很勤啊

2012-07-26 11:11 回复
- 朴人博客
  最近没事，就整天更新了。
  
  2012-07-26 13:47 回复
篮球比分
博主更文更得很勤啊

2012-07-26 11:11 回复
- 朴人博客
  最近没事，就整天更新了。
  
  2012-07-26 13:47 回复
zhiqin
我是不是在hostloc上见过你？

2012-07-26 01:49 回复
- 朴人博客
  我哪知道。你hostloc上叫啥额？
  
  2012-07-26 01:51 回复
zhiqin
我是不是在hostloc上见过你？

2012-07-26 01:49 回复
- 朴人博客
  我哪知道。你hostloc上叫啥额？
  
  2012-07-26 01:51 回复

朴人博客