最新版本的jQuery Mobile 1.1本月13号刚刚发布,带给我们了最新的强大特和代码提升。在这篇文章中,我们将要快速的介绍jQuery mobile的新特性及其移动开发人员需要了解的所有内容。准备好和我们一起体验jQuery mobile吧!

在这个文章中,我们将要介绍如下内容:

  • 改良的固定header和footer
  • 提高的页面过渡效果,和俩个新开发的过渡效果
  • 加载“spinner”和文本提升
  • 漂亮的迷你表单元素
  • 更漂亮的翻转开关切换
  • 更好的滑动选择
  • 禁止为整个页面标签优化和AJAX处理
  • 其它相关的提升和修改

在本篇文章结尾,你会看到一些jQuery Mobile 1.2的新特性和组件。

首先我们开始介绍jQuery mobile的标题特性,大大的提升了header和footer工具条。

Toolbar的巨大改良

固定的toolbar是用来固定页面顶端和低端的工具条,通过添加data-position="fixed"来添加到页头和页尾。

最简单的方式去创建一个固定的页面元素是使用CSS position:fixed 。因为移动浏览器对于这个属性的支持不是很完整,所以在老版本中通过动态的重新定位来实现功能。虽然可以工作,但是不是非常完美。

很 幸运的是,浏览器的支持在最近已经被大大的增强了。使用version1.1,jQuery mobile团队已经完整的重新设计了toolbar,开始使用position:fixed。这样使得toolbar更加的流畅。对于不支持 position:fixed的浏览器,例如,Safari in iOS4.3。整个框架会fallback到一般的静态位置的toolbar。

如果你希望重新使得它动态,你可以考虑使用一些polyfill。

点击下面的演示,看看新版本和旧版本的区别吧。如果需要看到效果,请使用现代浏览器,或者桌面浏览器。

jQuery1.0演示  jQuery1.1演示

而且toolbar现在拥有了一系列的选项和方法帮助你自定行为。包括visibleOnPageShow选项来控制是否页面初始的时候显示toolbar。tapToggle选项来打开或者关闭"toggle-on-tap"特性。show,hide和toggle方法可以使用代码控制显示和隐藏toolbar。

这 里还有一个很重要的小变动,关于全屏定位。在jQmobile 1.0中你可以通过添加data-fullscreen="true“来实现toolbar的"fullscreen"模式。在1.1中,你现在需要添加 这个属性到独立的header和footer容器中而不是页面容器。

更多信息:这里有一些已知的position:fixed和Android 2.2/2.3的问题。请查看详细文档。

更多信息:jQMobile1.0使用CSS overflow-scrolling:touch来提升固定的toolbar。因为1.1使用真正的position:fixed,overflow-scrolling:touch已经被删除了。所以这个属性不再有效。

更流畅,更棒的页面过渡效果

jQMobile1.1中最好的一个变化在于页面间更加流畅的过渡效果。因为jQuery Mobile框架工作的方式,需要先滚动到顶端在执行页面过渡效果。下面是整个流程:

  1. 用户向下滚动到目前页面
  2. 点击一个link查看新页面
  3. jQuery mobile滚动到本页面的顶端
  4. jQuery mobile使用过渡效果来实现新页面

这个过程比较不完美,特别对于比较慢的移动浏览器:

因为无法避免滚动。所以jquery mobile团队使用了如下方式来处理:

  1. 用户向下滚动到目前页面
  2. 点击一个link查看新页面
  3. jQuery Mobile开始执行过渡效果
  4. 在一个合适的时候淡出fadeout页面,jQuery mobile执行滚动到本页面的顶端(页面为空),然后在淡入fadein页面。
  5. jQuery mobile完成过渡效果来实现新页面

大家看到不同的地方在于过渡时机,页面淡出后内容变少,这个时候滚动速度就更快。因为没有内容,所以基本用户看不到滚动效果。

大家可以看看如下的对比演示。

jQuery1.0演示  jQuery1.1演示

或者到jQuery Mobile网站上看演示:

  • jQuery Mobile 1.0's transitions (without the fade)
  • jQuery Mobile 1.1's transitions (with the fade)

更多信息:一个使用这种新的fade机制的例外过渡效果是slide,这个过渡效果使用老的非淡出式的方式。因为不使用fade效果更好,所以你可以考虑使用slidefade来得到更好的性能

更多信息:因为一些移动端浏览器的限制,例如,Android2.x,fade是唯一支持的特效。

两个新添加的页面过渡效果

除了1.0支持的slide, slideup, slidedown, pop, fade, 和 flip,1.1添加了2个过渡效果:

turn 和 flow

效果如下:

过渡效果turn演示  过渡效果flow演示

更好更灵活的”loading“旋转效果

"加载中..."效果已经被重新设计,缺省依旧没有文字。你可以设置更多选项:

$mobile.loadingMessageTextVisible:是否显示Loading文字(boolean:缺省为false)

$mobile.loadingMessageTheme:是否使用特定的主题显示信息框。缺省使用”a”,前提是 $.mobile.loadingMessageTextVisible为 true。

$mobile.pageLoadErrorMessageTheme:使用错误信息的主题

你可以在mobileinit方法中全局定义,如下:

$(document).bind( "mobileinit", function() {  $.mobile.loadingMessageTextVisible = true;} );

更多信息:和前面版本一样,你可以使用$.mobile.loadingMessage显示加载信息,$.mobile.pageLoadErrorMessage显示错误信息。

如果你调用 $.mobile.showPageLoadingMsg()来显示加载信息,你可以传递3个参数在自定义信息和“加载中”:

  • 信息框主题
  • 信息框文字
  • 是否隐藏图片,缺省false

下面是演示

loading演示

toolbar中使用的迷你表单元素

现在你可以添加一些data-mini="true"到表单元素中来创建更小的表单元素,非常适合添加到toolbar中。这个页面可以查看所有支持的元素及其正常版本。

更漂亮的翻转开关切换

重新定义了开关的样式,看起来更紧凑。更接近移动平台上的本地开关样式。

jQuery1.0演示  jQuery1.1演示

更好的滑动选择

区域选择现在支持了step属性。你可以添加step=5到<input type="range"/>来生成一个滑动选择。

另外一个加强是提供了data-hightlight="true"属性,会提供了一个输入框告诉用户选择的数值,如下图:

查看演示

阻止元素被针对移动设备改良

因 为jQuery Mobile缺省会搜索页面元素,将它们自动改成针对移动或者触摸设备更有好的元素。例如,滑动选择,复选框或者list view等。同时也添加AJAX到link和button,但是有的时候我们不希望它这样处理,例如,我们自己开发自己的页面组件。

以往我们都用一些小技巧,例如, keepNative 选项,initSelector 属性等,在jQuery Mobile1.1中,我们可以使用data-enhance="false"来阻止jqMobile处理。

<div id="myContainer" data-enhance="false"><!-- Enhancement and Ajax handling disabled for all elements inside this div --></div>

并且在全局选项中指定:

$(document).bind( "mobileinit", function() {  $.mobile.ignoreContentEnabled = true;} );

查看演示

针对整个容器关闭AJAX处理

在过去我们可以针对表单或者链接来添加data-ajax="false"属性,禁止AJAX处理指定的对象表单或者链接。在jQuery mobile 1.1中,我们可以针对一个容易处理,如下:

<div id="myContainer" data-ajax="false"><!-- Ajax handling disabled for all elements inside this div --></div>

和data-enhance属性一样,你也需要在mobileinit中指定ignoreContentEnabled为true。

查看演示

其它变化

  • 更清楚的缺省主题
  • 更容易的主题Roller
  • 支持jQuery1.7.1
  • AMD模块支持
  • 解决缩放bug
  • 可搜索的文档

jQuery mobile 1.2特性

这里列出计划中的几个特性:

弹出组件

允许你讲一个div转化为一个弹出组件,data-role="popup",这里查看演示

无新页面加载取得页面内容

帮助你取得链接内容加载到本地的容器中

下载Builder

帮助你下载你需要的组件,效果等等。

总价

这篇文章中我们介绍了jQuery mobile 1.1的新特性,你学习了toolbar的加强,过渡效果的加载和新过渡效果等。还介绍了1.2中的一些计划开发的特性。希望对于大家开发jQuery有帮助。

转载于:https://www.cnblogs.com/gbin1/archive/2012/04/19/2457278.html

jQuery Mobile 1.1 : 更流畅,更快捷,更实用相关推荐

  1. 会议更流畅,表情更生动!视频生成编码 VS 国际最新 VVC 标准

    简介:阿里云视频云的标准与实现团队与香港城市大学联合开发了基于 AI 生成的人脸视频压缩体系,相比于 VVC 标准,两者质量相当时可以取得 40%-65% 的码率节省,旨在用最前沿的技术,普惠视频通话 ...

  2. iqoo3升级鸿蒙,鸿蒙最强对手迎来更新!安卓12正式发布:更流畅以及更个性化...

    目前Material You设计语言将首先在谷歌亲儿子Pixel手机上采用,而在未来,它会出现在所有谷歌的产品中,无论是网络产品还是硬件产品.包括智能手机.平板.TV.可穿戴设备.智能家居.显示设备等 ...

  3. 新浪前端工程师开发出在线演示文档JS框架webSlide,比impress更流畅、更实用

    相信各位一直关注我们的朋友对在线演示工具不会再陌生,我们先后介绍过Prezi这个可供普通用户使用的站点,以及 impress.js这个可供开发者或是有前端设计基础的用户使用的 JS 框架.使用它们都可 ...

  4. Android 12正式发布:安卓历史最大设计变化、更流畅了!

    大家期待的Android 12终于来了,其实在这之前谷歌已经推出了多个测试版,所以它已经没有那么神秘了. 相比前几代系统来说,Android 12是Android历史上最大的设计变化,引入全新的设计语 ...

  5. 使用jQuery Mobile设计移动设备网站

    来自:http://msdn.microsoft.com/zh-tw/hh875190.aspx 在行動式裝置普及化的現在,要開發一個能夠跨行動式裝置的原生應用程式 (Native App) 是非常不 ...

  6. 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框

    文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...

  7. jQuery Mobile 和 Kendo UI 的比较(转)

    jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...

  8. jQuery Mobile框架的简单介绍

    When the world discovered the web, things were unexciting and lifeless. For example, building a simp ...

  9. win2008服务器系统设置,处理windows 2008系统设置让运行更流畅的方法

    windows 2008系统对于不同的用户来说在解除以后很多的时候发现不和其他的系统一样,在运行的时候是没有那么的稳定和运行流畅的,那在电脑中是可以自己设做一些性的稳定性增加电脑使用的情况的,今天小编 ...

最新文章

  1. Python ljust()方法
  2. mysql查询不到邮件_mysql – sql查询通过电子邮件获取用户列表
  3. 如何优雅而又不失内涵的在centos7下安装tree命令
  4. LeetCode 717. 1比特与2比特字符
  5. python模块是一个可共享的程序_python基础-模块
  6. 拓端tecdat|R语言提取时间序列的周期性成分应用EMD,小波滤波器,Baxter过滤器等
  7. java 实现ukey身份认证_一种基于ukey认证的单点登录实现方法与流程
  8. Oracle JDK究竟从哪个版本开始收费?
  9. 计算机应用基础单选题10an,计算机应用基础10考(附答案).doc
  10. 【电脑使用】如何将电脑磁盘变为移动磁盘?
  11. 小甲鱼零基础入门学习Python(绝对干货,值得学习)
  12. nanohttp简单使用
  13. Pytorch SoftMax回归
  14. 从备受质疑到业绩翻盘,这家少女装品牌为何能上演“命运大逆转”?
  15. net-java-php-python-人事工资管理系统计算机毕业设计程序
  16. 利用勾子监视系统或进程中的各种事件消息,截获发往目标窗口的消息并进行处理
  17. [转载]芋道 Soul 极简入门(国产微服务网关)
  18. 采用折中方法的计算机系统,计算机系统结构期末复习资料
  19. ibm 浪潮 小型机 oracle解决方案,浪潮称小型机与IBM相当 通用服务器已超越国外对手...
  20. 基于ssm工商学院办公用品管理信息系统设计与实现-计算机毕业设计源码+LW文档

热门文章

  1. python 修改array_python 基础_ 数组的 增删改查3
  2. 深入Java核心 Java内存分配原理精讲
  3. 计算机系统组织结构,第4章 操作系统计算机组织结构.ppt
  4. scala字符串替换_如何在Scala中替换字符串中的正则表达式模式?
  5. 如何给Linux操作系统(CentOS 7为例)云服务器配置环境等一系列东西
  6. 显卡测试软件毛毛虫,超龙超龙,与众不同,顶流配备,散热一流,3070Ti超龙旗舰版评测...
  7. SDL_main导致main找不到入口
  8. 告白——一个loser的手记
  9. Redis运维和开发学习笔记(5) 主从复制和sentinel哨兵模式
  10. 高级IO--1 ---(五种典型IO,阻塞IO,非阻塞IO,信号驱动IO,异步IO, IO多路转接)