jQuery Mobile 1.1八大新特性介绍

 　　【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