[转载]jQuery Mobile 1.1

最新版本的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有帮助。