jQuery Mobile 的最新更新

不久前,jQuery 团队发布了 jQuery Mobile 1.2。这个新版本有一些很棒的变化!在这篇文章中,我们一起来回顾一下其中开发者们可以使用的一些新的窗口部件(Widget),看一下一些对现有窗口部件的更改,并快速看一下一些影响比较大的并可能会对你的 jQuery Mobile 应用程序产生影响的一些改进。让我们开始吧,好吗?

首先,我们需要把它下载下来。打开 jQuery Mobile 下载页面 并根据你的需要选择下载。或者你可以就使用下面提供的样板代码。

此外,现在可能是快速地讨论一下 jQuery Mobile 团队正在构建中的 Download Builder 的一个好时机。虽然它仍然是 Alpha 状态,但是允许你自定义下载内容以仅包含 jQuery Mobile 中你需要的部分,而没有任何多余的内容。你可以排除你并不关心的那些特定的事件,转换,表单元素,或者窗口部件。这是为那些对把握他/她的应用程序的最高级别性能特别在意的开发者们准备的。


窗口部件(Widget)

任何 jQuery Mobile 应用程序的核心都是它的窗口部件。可以说,它们是页面上最引人注目的部分,也是能够让用户以如此容易的方式和页面进行交互的部分。jQuery Mobile 团队已经花了无数个小时在窗口部件的测试,构建,以及提炼上,以确保这是他们能够达到的最好程度。在 1.2 版本中,该团队使用了一个自从这个框架首次发布时开发者们就一直在要求的一个窗口部件真正取得了巨大的成功:popup modals。

Popups

popup modal 是页面上覆盖在页面上其他部分之上的一个小的部分。它们最典型的用法是被作为工具提示,或者用来显示图片,地图,以及额外的内容。这些信息通常不会重要到需要在使用一个页面,但是仍然重要到需要单独显示。jQuery Mobile 1.2 中已经实现的 popup 的方式非常的完备。让我们来学习一下如何能够非常容易地给项目添加 popups。

快速说一下,为简洁起见,后面所有的代码示例都将使用下面的样板 HTML 。为了方便大家使用,jQuery Mobile 的 CSS 和 JS 文件(包括 jQuery)都使用 jQuery CDN 进行热连接。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>jQuery Mobile 1.2</title>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="content">
        <!-- your content goes here -->
    </div>
</body>
</html>

在你的应用程序中给页面添加一个 popup 的过程分为两步。首先,你需要一些方法来触发 popup。这通常是一个链接或按钮,或者是什么用户可以与之交互的东西。要触发元素,我们需要添加下面的属性:

data-rel="popup"

其次,你需要被显示的内容。这可以从一个单独的 div 延伸到一个 menu,一个 form,甚至图片。内容元素都有自己的属性:

data-role="popup"

最后,对于简单的链接按钮,其 href 属性必须对应于要显示的内容的 id 。让我们回顾一下完整的实现。

<a href="#simplepopup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="simplepopup">
    <p>This is a completely basic popup, no options set.<p>
</div>

你将在页面上看到的应该看起来类似下面这样:

popup-simple

Tooltips

现在,你知道如何创建一个 popup 了,让我们看一下其他的可能性。一个常见的使用方式是当用户在一个按钮上点击时显示一个帮助文本或可展开文本的 tooltip。设置的代码跟前面一样:

<a href="#tooltip" data-rel="popup" data-role="button">Find out more</a>
<div data-role="popup" id="tooltip" data-theme="e">
    <p>You found out more!.</p>
</div>

这次,我们使用 jQuery Mobile 中的 e 调色板来样式化生成的内容,以给它一个更欢快的外观(译注:e 是黄色,有时代表活力)。这有助于我们记住 popups 是 jQuery Mobile 国度的一等公民,并且可以被像页面上的任意其他内容一样处理。

Menus

让我们再深入到稍微复杂一点内容:菜单。这是页面导航的一种常见的方法。给用户一个随时可用的菜单。那么,使用 popup 的菜单看起来是什么样子呢?

<a href="#menu" data-rel="popup" data-role="button">Menu</a>
<div data-role="popup" id="menu" data-theme="a">
    <ul data-role="listview" data-theme="c" data-inset="true">
        <li data-role="divider" data-theme="a">My Menu</li>
        <li>Unlinked</li>
        <li><a href="methods.html">Linked</a></li>
        <li><a href="methods.html">With count</a><span>42</span></a></li>
    </ul>
</div>

产生的输出应该类似于这样:

popups-menu

你也可以在 popups 中使用 1.2 版的可折叠列表。这里是一个快速示例:

<a href="#nestedmenu" data-rel="popup" data-role="button">Nested Menu</a>
<div data-role="popup" id="nestedmenu" data-theme="none">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="true">
            <h2>Colors</h2>
            <ul data-role="listview">
                <li><a href="#">Red</a></li>
                <li><a href="#">Blue</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-inset="true">
            <h2>Shapes</h2>
            <ul data-role="listview">
                <li><a href="#">Circle</a></li>
                <li><a href="#">Square</a></li>
            </ul>
        </div>
    </div>
</div>

然后产生的是:

popups-nested-menu

值得注意的是 listview 上的 data-inset=”true” 是必须的,否则你的列表将会出现方角。试一下你就会看到。

Forms

另一个常见的用户体验方法是在页面上悬停显示一个登录表单。现在可以使用 jQuery Mobile 的 popup 实现了。这里是一个简单的用户名/密码表单。

<a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a>
<div data-role="popup" id="login" data-theme="a">
    <form style="padding:10px 20px;">
        <h3>Please sign in</h3>
        <label for="un">Username:</label>
        <input type="js" name="user" id="un" placeholder="username" />
        <label for="pw">Password:</label>
        <input type="password" name="pass" id="pw" placeholder="password" />
        <button type="submit" data-theme="b">Sign in</button>
    </form>
</div>

它给你:

popup-form

默认情况下,popups 把它自己居中到触发它们的对象上面。在下面的三个例子中你将会看到有一个可选的属性。这个属性是 data-position-to=”window” ,然后你把它应用到触发了 popup 的那个元素。试着把它加到上面的 Login 按钮看看会发生什么。

Dialogs

web application 的一个常见的要求是和用户进行交互的能力。我们刚刚回顾了一个方法:登录表单。然后,有时你需要带着问题来提示用户。就此,对话框应该是一个理想的解决方案;而且你绝对没有想到的是,popup 已经帮你实现了。那么它的代码看起来是什么样的呢?这里提供了一个简单的示例:

<a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Dialog</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
    <div data-role="header" data-theme="a">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d">
        <h3>Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Yes, Delete it</a>
    </div>
</div>
popup-dialog

在 popup 内容容器中,注意你使用的另外一个新属性: data-overlay-theme=”a”。这个属性就是给对话框应用阴影背景。它受你的主题影响,所以在和由 ThemeRoller 创建的主题一起使用时要小心。

Photos

我已经数不清到底有多少次看到 jQuery Mobile 开发者们要求提供一些更好的处理图库的方法。虽然针对大量图片 popups 还不是完备的解决方案,但是它们很适合于数量不多的但是需要放大查看的图片。更棒的是,它超乎想象的容易;试一下看看吧:

<a href="#photo" data-rel="popup" data-position-to="window" data-role="button" data-transition="fade">Photo</a>
<div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="nojs">Close</a><img src="http://lorempixel.com/450/300/food/" />
</div>

上面的代码提供了一个在窗口内居中显示的优雅的照片,包括一个关闭窗口按钮。

popup-photo

它们是怎么实现的呢?在一个 popup 的上下文中, anchor 标记具有一个属性,该属性的表现和它用在页面上别的地方时略有差异。特别地,那个 ui-btn-right 类把照片定位在图片的角落而不是边上,而 data-icondata-iconpos 属性能够让你像一个常规按钮那样来样式化这个按钮。 使用 popup 的话你的应用将会变得相当精美,不仅如此,还可以用于显示内嵌视频甚至可交互的地图。看看 jQuery Mobile documentation for popups and iframes 吧。

可折叠的列表视图

另一个很棒的的新特性是将可折叠集合和列表视图相结合的能力。调用“增强”的 “可折叠列表视图”然后你就得到了 jQuery Mobile 1.2 的一个全新 widget。它们是怎么实现的呢?你问这个问题,我很高兴。只要创建任意一个你想要的列表,再把它封装到一个可折叠集合中就可以了。可折叠列表视图而且还支持多个列表 – 为此疯狂吧!

<div data-role="collapsible" data-theme="b" data-content-theme="c">
    <h2>Favorite Spice Girl?</h2>
    <ul data-role="listview">
        <li><a href="index.html">Posh</a></li>
        <li><a href="index.html">Scary</a></li>
        <li><a href="index.html">Sporty</a></li>
        <li><a href="index.html">Baby</a></li>
        <li><a href="index.html">Ginger</a></li>
    </ul>
</div>

上面的代码将生成下面这个可折叠的列表视图:

listview-collapsible

增强功能

除了新的 widget 类型之外, jQuery Mobile 1.2 还针对已有功能提供了多项实用的增强功能。让我们看一下这其中更重要的那些。

jQuery 支持的变化

1.2 版本所做的最大的改进之一就是增加了对 jQuery 1.8 的支持。这是通过对 Sizzle.js( jQuery 的选择器引擎)进行完全重写的的形式实现的,并随着大量的其他改进一起,最终带来了相当显著的性能提升。 代价是 jQuery Mobile 团队决定是时候定期废止对 jQuery 1.6 的支持。这对那些仍在使用 jQuery 较旧版本的各位可能是个不幸的消息,但是这是一个公平的交易。

列表视图自动分隔器

如果你曾经必须在 jQuery Mobile 中管理一个不断变化的人,地点,或物品的列表,那么为了显示动态的列表视图的页头标题,你当时可能必须得写一些非常需要技巧的代码才能处理。很不幸你花的那么多时间,因为 jQuery Mobile 团队已经把它变成了只要简单地添加一个单个的属性就可以了。

data-autodividers="true"

它把下面这个列表:

listview-dividers-before

转变成:

listview-dividers-after

要注意的是这并不负责处理排序,分组,或是过滤。对于诸如此类的功能,可以考虑试试我的 jQuery Mobile Tinysort plugin

只读列表

jQuery Mobile 提供了 “只读” 列表视图,但是之前很难分辨出他们是无法点击的。 1.2 版移除了列表渐变,把行变成了单色。这应该可以给你的用户一个更好的视觉上的提示。

更好的表单元素宽度调整

1.2 版修正了和表单元素有关的一个有时比较讨厌的问题,这个问题造成在某些情况下表单元素无法填满父元素的全部宽度。

外加新增的设备

你可能已经注意到了,几乎每天都有新的设备被添加进来。针对这些设备,jQuery Mobile 团队拼尽全力尽可能多地进行测试。最新加入 A 级平台列表的是下面这些设备/操作系统/浏览器: iOS 6, Android 4.1 (Jellybean), Tizen,Android 版的 Firefox ,以及 Kindle Fire HD。


完整的变更列表

你可以在 jQuery Mobile 博客 上找到一份完整的有关 1.2 版本都做了哪些变更的列表。

我希望这里的的某些改进能够有助于你完善自己的应用程序。记住 jQuery Mobile 团队就在你的身边!如果你意识到一些你认为应该是会很有用的东西,就要求他们提供:在 他们的 Github 版本库 中创建一个 issue 进行提议。更好的方式是,建一个版本库的分支出来,并自己添加一些代码。


译自:http://net.tutsplus.com/tutorials/javascript-ajax/the-latest-updates-to-jquery-mobile/?search_index=10
原文地址:http://www.tfan.org/the-latest-updates-to-jquery-mobile/

回复