【IT168技术】随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用。在众多的移动HTML5开发框架中,比较著名的是jQuery Mobile。最近,jQuery Mobile宣布发布了最新的1.1版本,其中的一些新特性必1.0时代有了很大的提升。在本文中,将会就这些新的特性进行介绍,还将讨论在1.2版本中估计会新加入的特性。本文的阅读对象为对jQuery Mobile开发有一定认识的读者。

工具条方面的改良
jQuery Mobile

  新特性总述

  在jQuery Mobile 1.1中有如下值得关注的八大新特性:

  1、改进的固定于表头和页脚的工具条。2、页面的过渡效果进行了改良,新增两种过渡效果。3、加载中效果的文字显示改进。4、新增漂亮的迷你表单元素。5、更漂亮的开关设置。6、改进的滑动滚动条的效果。7、禁止jQuery Mobile针对元素的改动。8、其他的一些小的改进。

  工具条方面的改良

  固定的工具条是用来固定页面顶端和底部的,这可以通过添加data-position="fixed"来添加到页头和页尾。其特点是用户在翻看页面到底部或者顶端时,能依然清晰看到页面头部和底部的工具条。

  最简单的方式去创建一个固定的页面元素是使用CSS 3中的 position:fixed 。可惜的是,因为移动浏览器对于这个属性的支持一直都不是很完美,所以在旧版本的jQuery Mobile中,通过动态的重新定位来实现该功能,但效果不是很好,运行下面两个版本的DEMO,明显看到,在1.0版本中,当用户滚动鼠标到最底部的内容时,页面出现抖动,头部和底部的工具条出现闪动,但在新的1.1版本中,已经是解决了这个问题。

 

  幸运的是,随着现在新型浏览器的功能不断增强,在1.1版本中,jQuery mobile团队对工具条进行了重新的设计,并且尽可能使用了 position:fixed,这样使得工具条的运行更加流畅。对于不支持 position:fixed属性的浏览器,例如,Safari in iOS4.3,则会使用一般的静态位置去显示工具条,比如就是在顶部和底部的固定位置显示。如果依然希望在iOS上或旧的jQuery版本上,实现在滚动内容页时,工具条是在顶部和底部固定时,则可以选择使用如下这个开源的CSS样式。

  现在新版本的工具条,还有了一系列的新的选项和方法。例如visibleOnPageShow选项来控制是否页面初始的时候就显示工具条。tapToggle选项来打开或者关闭"toggle-on-tap"特性。show,hide和toggle方法可以使用代码控制显示和隐藏工具条。

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

  注意,这里有一些已知的关于position:fixed在Android 2.2/2.3中运行的问题。请查看详细文档。

  jQMobile1.0使用CSS overflow-scrolling:touch来固定的工具条的位置。1.1使用真正的position:fixed,overflow-scrolling:touch属性已经被删除了,所以需要修改相关的代码。

http://www.doudouguo.cn