最新jQuery Mobile 1.2版本新特性

 

大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个 jQuery Mobile RC版本介绍文章介绍主要的特性。就在前不久，jQuery Mobile团队又发布了jQuery Mobile 1.2。新版本中带来了一些非常不错的特性。在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget，及其一些针对老版本widget的功能加强。希望大家喜欢！

Widgets

jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中，加入了一个全新的widget：popup modal。

Popups （弹出层）

弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏，显示照片，地图或者其它内容。在jQuery mobile 1.2中，实现了这个超棒的widgets。

在本篇文章中，我们将使用如下代码框架来演示代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

这里我们使用CDN来加载javascript。

友情提示：请大家使用Chrome来访问以下的“在线调试”地址，谢谢！

为了添加popup弹出层，我们需要添加如下属性来定义所参考类型是popup：

1	data-rel="popup"

然后定义具体的插件类型，如下：

1	data-role="popup"

展示的触发层内容，可以是表单，菜单或者图片，完整代码如下：

1 2 3 4

Open Popup This is a completely basic popup, no options set.

在线调试

Tooltips（工具提示条）

使用popup我们还可以创建工具提示条，如下：

1 2 3 4

Find out more You found out more!.

在线调试

Menus（菜单）

下面我们生成一个菜单，如下：

1 2 3 4 5 6 7 8 9

Menu My Menu Unlinked Linked With count42

在线调试

当然，你也可以生成可缩放list，如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Nested Menu Colors Red Blue Shapes Circle Square

在线调试

Form（表单）

我们也可以生成弹出式样的登录表单，如下：

1 2 3 4 5 6 7 8 9 10 11

Login Please sign in Username: Password: Sign in

在线调试

Dialogs（对话框）

对话框也是我们常用的，如下：

1 2 3 4 5 6 7 8 9 10 11 12

Dialog Delete Page? Are you sure you want to delete this page? This action cannot be undone. No Yes, Delete it

在线调试

Photos（图片展示）

使用悬浮方式展示图片，如下：

1 2 3 4

Photo Close

在线调试

List Views （可缩放列表）

这个效果肯定你也会需要：

1 2 3 4 5 6 7 8 9 10

Favorite Spice Girl? Posh Scary Sporty Baby Ginger

在线调试

功能加强

其它的更新包括了一些功能上的加强。

jQuery支持更新

开始支持jQuery1.8。sizzle.js的重写带来了性能的提升及其其它。并且开始考虑放弃支持1.6，如果你使用旧版本的话，可能会不舒服。

列表视图的自动分隔

原来：

现在：

注意这里不包括管理排序，分组和过滤。如果你需要类似功能，考虑这个插件： jQuery Mobile Tinysort plugin.

只读列表

提供了只读列表，但是对于能不能点击不是很明显。

提供了更好的表单元素宽度调整

jQuery mobile version1.2解决了表单元素的问题，有时候不能完全的占有父元素宽度

其它的设备的支持

添加了另外一些平台：iOS6；Android1.4(Jellybean)，Tizen，firefox for Android和Kindle Fire HD。

完整的更新列表

你可以在官方博客来查看完整的更新，希望我们的介绍能够给你带来一部分的新版本体验，如果你有任何问题，请给我们留言！via  tutsplus

来源： 最新jQuery Mobile 1.2版本新特性