jquery mobile使用小技巧

 

   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的手机上。各种搜索引擎无果后，曾经我避免把页面长度做得超过1屏，也尝试修改jq mobile的源码（但效果不好），折磨了一段时间后，迎来了jquery mobile的更新，然后 1.1.0版本解决了这个问题。

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

 

2.页面转场闪屏问题

在页面转场时，页面内容经常会闪动，特别对于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的支持和兼容，可以说是为移动端而设计的，假如你正在开发web app，有什么理由不用它呢？

3.tab选择之后back不能恢复原始状态问题

   在几个均有导航的页面如果其中有一个页面有tab页面，选择非默认的之后，返回上一个页面，之后在回来，没有采用默认的那个tab选中并改变默认颜色。可以采用如下代码：ui-btn-active表示选中样式

 

  <!-- 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>

 

			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;
						}

 

4.特殊情况下选中相关问题连接没有加载

   解决的方案有两种：

  1.采用非ajax调用（data-ajax='false',rel="external" , data-ajax="false" ）

  2.采用同一个页面多个page模式，采用pageshow加载并初始化。

 

 

 

 

 

 

评论

7 楼 PassWordPort 2012-06-18  

longgangbai 写道

PassWordPort 写道

1.页面转场时，当前页会先回到顶部，再跳转到目标页
相信在jquery mobile 1.1.0 版本出来之前，每个人都会遇到的问题。页面短的还好，假如页面内容很长，每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作，更可怕的是当你返回上一页时，jquery mobile会恢复你上次浏览的位置，滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验，特别是在android的手机上。各种搜索引擎无果后，曾经我避免把页面长度做得超过1屏，也尝试修改jq mobile的源码（但效果不好），折磨了一段时间后，迎来了jquery mobile的更新，然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们，赶紧去下新版的jq mobile。


我用的就是jq mobile 1.1.0 版本，也不行。

你的jquery的版本是多少呀？最好是1.64或者1.7

我用的phonegap 1.8 + jquery mobile 1.1.0 + jquery 1.7.1还是不行，每次跳转页面都会回到顶部，方便看看你这方面的 代码吗？

6 楼 longgangbai 2012-06-17  

qiu768 写道

把这段css加进去之后，页面上的字体显示效果变得很差

建议自定义主题样式，不要采用默认的样式。

5 楼 longgangbai 2012-06-17  

PassWordPort 写道

1.页面转场时，当前页会先回到顶部，再跳转到目标页
相信在jquery mobile 1.1.0 版本出来之前，每个人都会遇到的问题。页面短的还好，假如页面内容很长，每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作，更可怕的是当你返回上一页时，jquery mobile会恢复你上次浏览的位置，滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验，特别是在android的手机上。各种搜索引擎无果后，曾经我避免把页面长度做得超过1屏，也尝试修改jq mobile的源码（但效果不好），折磨了一段时间后，迎来了jquery mobile的更新，然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们，赶紧去下新版的jq mobile。


我用的就是jq mobile 1.1.0 版本，也不行。

你的jquery的版本是多少呀？最好是1.64或者1.7

4 楼 PassWordPort 2012-06-15  

1.页面转场时，当前页会先回到顶部，再跳转到目标页
相信在jquery mobile 1.1.0 版本出来之前，每个人都会遇到的问题。页面短的还好，假如页面内容很长，每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作，更可怕的是当你返回上一页时，jquery mobile会恢复你上次浏览的位置，滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验，特别是在android的手机上。各种搜索引擎无果后，曾经我避免把页面长度做得超过1屏，也尝试修改jq mobile的源码（但效果不好），折磨了一段时间后，迎来了jquery mobile的更新，然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们，赶紧去下新版的jq mobile。


我用的就是jq mobile 1.1.0 版本，也不行。

3 楼 qiu768 2012-06-12  

把这段css加进去之后，页面上的字体显示效果变得很差

2 楼 longgangbai 2012-05-16  

Frederic 写道

你好，我用了你的方法，转场闪屏似乎没有解决，请赐教！

兄弟，采用jquery-mobile-1.1.0的版本吗？如果不是那么可能还是有问题，最好采用1.1.0版本。

1 楼 Frederic 2012-05-15  

你好，我用了你的方法，转场闪屏似乎没有解决，请赐教！