- 浏览: 7253132 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
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加载并初始化。
评论
相信在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还是不行,每次跳转页面都会回到顶部,方便看看你这方面的 代码吗?
建议自定义主题样式,不要采用默认的样式。
相信在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
相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。
我用的就是jq mobile 1.1.0 版本,也不行。
兄弟,采用jquery-mobile-1.1.0的版本吗?如果不是那么可能还是有问题,最好采用1.1.0版本。
发表评论
-
[转]年度最实用50款免费Android应用推荐
2012-11-08 16:39 3260据国外媒体报道,有人说Android应用市场比iPhone应用 ... -
GIS的学习(四十五)【转】Integration of the MBTiles format on Android
2012-10-22 17:13 2882转载自 http:/ ... -
GIS的学习(四十四)osmdroid sdcard检查
2012-10-15 16:12 2278在许多应用中使用到sdcard的检查,在osmdro ... -
GIS的学习(四十三)osmdroid基于几个经典代理类
2012-10-15 16:06 2561在osmdroid中给基于位置的代理类如下: pack ... -
Android中PopupWindow的用法(位置、动画、焦点)
2012-10-12 14:12 11424在Android中有很多级别的Window,不同级别的Wind ... -
【转】Android根据分辨率进行单位转换-(dp,sp转像素px)
2012-10-11 09:18 27064Android系统中,默认的单位是像素(px)。也就是说,在没 ... -
GIS的学习(二十九)Osmdroid 离线地图存放位置的研究和详细分析
2012-09-23 11:49 11356在手机通过osmdroid调用离线地图必须放在 ... -
GIS的学习(二十八)Osmdroid相关的开源项目
2012-09-23 11:31 25183osm 数据格式(openstreet map)与Ro ... -
GIS的学习(二十七)通过geoserver的georss访问第三方地图
2012-09-23 00:34 3525在geoserver中如果想调用第三方地图可以采 ... -
android中使用 定时更新界面定时器Timer的使用
2012-09-22 22:09 25433handler的使用 一、Handler的定义: ... -
【转】Android应用程序的自动更新升级(自身升级、通过tomcat) .
2012-09-16 15:03 7274http://blog.csdn.net/mu0206mu/a ... -
GIS的学习(二十七)OGC 的WCS WFS 及WMS 服务
2012-09-11 22:22 12019http://www.gisall.com/?6678/v ... -
GIS的学习(二十六)geotools 使用 部分代码总结
2012-09-11 22:20 5615前段时间的一个项目 本来用ae完成了种种的 查询,空间分析等等 ... -
GIS的学习(二十五)geoserver wms中的各种操作API详细讲解和使用
2012-09-10 17:42 9605官方geoserver中WMS服务中几种操作的API的详细说明 ... -
GIS的学习(二十四)android异步调用geoserver wms中的地图
2012-09-10 17:38 8046在geoserver的客户端通过wms的GetMap实现 ... -
GIS的学习(二十三)geoserver中CQL和ECQL的使用
2012-09-10 16:29 6490以下引用自官方文档: CQL and ECQL¶ CQ ... -
GIS的学习(二十二)osmdroid中添加縮放控件
2012-09-06 23:09 2740package com.geoserver.osmdroid; ... -
GIS的学习(二十一)在osmdroid 地图中添加marker 并添加事件
2012-09-06 22:27 6432我有 osmdroid,overlayswithf ... -
GIS的学习(二十)基于Geoserver的WFS服务与Openlayers实现地理查询
2012-08-30 18:48 11306基于Geoserver发布的wfs服务,与Openlayers ... -
GIS的学习(十九)Geoserver使用添加,删除,查询地图中的POI
2012-08-30 17:28 10208在geoserver自定义的地图中通过geoserver ...
相关推荐
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery Mobile 十大常用技巧
jQuery Mobile常用开发技巧,这里有最全面的技术描述,有最底层的技术指导。
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 ...4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了不同开发语言,jQuery Mobile...
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。...
jQuery mobile相册的一种样式
初学者:jquerymobile自定义样式、提示弹窗
通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框
phonegap+jquerymobile开发经验小结
本资源以Hello Word为例,里面包含了jQuery Mobile框架所需要的部署文件。
jQuery Mobile是jQuery在手机和平板设备上的版本,用于创建针对智能手机和平板电脑的跨设备Web应用。 jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery Mobile...
jquery mobile用来学习的项目,适合新手使用学习
jQuery mobile滑动式的标题导航
jQuery Mobile快速入门.pdf
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...