jQuery Mobile 1.2更新一览 更好的表单调整机制
教程说明
- 难度级别: 普通
- 操作时间: 15 分钟
在开始之前，进行下载自然是首要工作。大家可以访问jQuery Mobile官方下载页面，并根据自己的需求选择要下载的项目。当然，直接使用下文所提供的样板代码也是可行的。
另外，我们在开始之前再聊几句由jQuery Mobile团队提供的下载生成器。尽管仍处于测试阶段，但这款工具已经允许用户任何选择想要下载的jQuery Mobile项目。无论是特殊事件、转移、表单元素还是窗口部件，只要大家觉得用不上，都可以从下载列表中取消掉。这一设定对于那些专注于打造高性能应用程序的开发者朋友来说还是很有意义的。
各类组件
组件是任何一款jQuery Mobile应用程序的真正核心，可以说正是它们构成了最直观的的页面内容以及用户交互必不可少的操作内容。jQuery Mobile团队在各类组件的创建、测试及改进工作上花费了无数个小时，借以确保这些小工具能够以最佳状态满足使用者的需要。在1.2版本中，开发团队抛出了一款令所有开发者为之疯狂、同时也期盼已久的组件：弹出模块。
弹出模块
弹出模块可以被看作是覆盖于其它页面及内容之上的一小块独立页面，它们一般被用于显示工具提示、照片、地图及其它额外内容。这类信息虽然并没有重要到值得额外开启新页面，但对用户来说仍然是种不可或缺的描述及说明机制。jQuery Mobile 1.2在弹出模块的实现方面堪称完美，下面我们将一同学习如何快速为应用程序添加弹出模块项目。
提醒各位，为了方便起见，后文中所使用的所有代码都将使用以下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>
在应用程序中添加弹出页面需要分两个步骤进行。首先，大家需要设定一些条件来触发弹出模块，通常情况下我们可以使用链接、按钮或者其它什么能与用户交互的视觉元素。要触发对应元素，我们要为其添加以下属性：
data-rel="popup"
接下来，我们还需要设定显示内容。内容多种多样，从div、菜单、表单甚至是照片都能实现。内容元素也要有自己的属性：
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>
通过上述代码，大家应该会看到的页面：
工具提示
现在大家已经学会了如何创建弹出模块，接着咱们再来尝试其它一些可能性。最常见的形式当然要数工具提示了：用户点击对应按钮、应用即弹出与之相关的说明或补充文字。代码设置与之前一样：
<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样式来打造更为美观的界面造型。这有助于大家理解弹出模块在jQuery Mobile中的优先级别，我们可以将其像页面中的任何其它元素一样进行处理。
菜单
接下来我们再来尝试一些更复杂的内容：菜单。利用菜单实现页面导航是目前最流行的开发模式，用户能够通过触控随意实现需要的功能。那么菜单与弹出模块相结合会迸发出怎样的火花？
<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 class="ui-li-count">42</span></a></li> </ul> </div>
得到的输出效果应该如下图所示：
大家也可以利用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="false"> <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="false"> <h2>Shapes</h2> <ul data-role="listview"> <li><a href="#">Circle</a></li> <li><a href="#">Square</a></li> </ul> </div> </div> </div>
输出结果如下所示：
这里需要注意的是listview或者列表边角必须符合data-inset="true"，否则结果将无法正确显示。大家亲自尝试就会明白其中的区别。
表单
另一套颇为流行的UX方案是在手势悬念在特定页面元素上方时显示登录表单，现在有了弹出模块的支持，我们也能够在jQuery Mobile的帮助下实现这类设计。下面列出的是一套简单的用户名/密码输入表单：
<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" class="ui-hidden-accessible">Username:</label> <input type="js" name="user" id="un" placeholder="username" /> <label for="pw" class="ui-hidden-accessible">Password:</label> <input type="password" name="pass" id="pw" placeholder="password" /> <button type="submit" data-theme="b">Sign in</button> </form> </div>
其输出效果如下所示：
在默认情况下，弹出模块会居于屏幕正中、覆盖掉触发新框体的页面元素。在接下来的三个实例中，我将具体解释另一项可选属性的作用——这就是data-position-to="window"，它作用于触发弹出模块的元素。大家可以将该属性添加到上图的Login按钮当中，看看结果会有怎样的变化。
对话框
Web应用通常需要具备与用户交互的能力。我们刚刚讨论了一种常见的实现方式：登录表单。但在某些情况下，我们还需要为有疑问的用户提供一些文字说明。面对这类需求，对话框就成了最完美的解决方案；所有必要的提示信息都能以此为载体向用户发布。那么对话框的代码要如何编写呢？下面咱们一起来看：
<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>
在弹出内容容器当中，大家要注意我们所用到的另一项新属性：data-overlay-theme="a"。该属性适合使用在背景图案色调较暗的对话框当中。由于对当前桌面主题影响较大，因此各位在将该属性对话框与由ThemeRoller创建的主题相结合时一定要谨慎。
图片
我已经无数次听到jQuery Mobile开发人员的抱怨，他们对于优秀图片库功能的渴望给我留下了深刻印象。尽管1.2版本中的弹出模块还不足以完美承担少量图片的处理工作，但它在图片缩放及详细浏览方面的功能已经相当令人满意。更重要的是，其实现方式极为简单；请看下列代码：
<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" class="ui-btn-right">Close</a><img src="http://lorempixel.com/450/300/food/" /> </div>
以上代码为我们提供了一套居中式图片显示模块，窗口关闭按钮也已经包含在内。
这到底是如何实现的？在弹出模块范畴内，anchor标签所代表的属性在运行中与其它页面位置属性略有不同。具体而言，ui-btn-right类会将其它图形元素放置于图片的四角而非侧面位置，同时data-icon与data-iconpos两种属性则允许我们把按钮设定为类似于其它常用按钮的外观风格。
如果大家有心，弹出模块的功能还具备相当大的挖掘潜力——包括显示内嵌视频甚至互动地图在内的一系列视觉特性都能够实现。要了解详细信息，大家不妨阅读jQuery Mobile说明文档中关于弹出模块的具体解释。
可折叠式列表视图
1.2版本的另一项伟大特性就是赋予开发者将可折叠集合与列表视图相结合的能力。我们将其称为“可折叠式列表视图”，jQuery Mobile团队还为大家带来了全新的配套工具。这些新玩意要怎么用？问得好，下面我就向各位展示如何轻松创建列表并将其包含在可折叠集合当中。可折叠式列表视图还支持多种列表——相信大家一定迫不及待了，咱们马上开始！
<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>
上述代码所输出的可折叠式列表视图如下所示：
增强功能
除了新的功能组件，jQuery Mobile 1.2还对原有功能进行了一系列卓有成效的增强。下面我们就一起来看看其中最具价值的主要内容。
jQuery支持变化
1.2版本中幅度最大的改进当数添加进了对jQuery 1.8的支持。通过对Sizzle.js（jQuery选择器引擎）的全面重写，新版本获得了显著的性能提升，其它多个方面也得到相应增强。
但jQuery Mobile团队最终决定放弃对jQuery 1.6的支持可能会给许多用户带来困扰。对于某些还在使用旧版本jQuery的开发者而言，这无疑是个坏消息。不过有得必有失，我们也没必要对此过分耿耿于怀。
列表视图自动分配器
如果大家所管理的列表在人物、地点或其它事物等内容方面不断进行变化，那么肯定会对动态列表视图标题所带来的编码难题感到头痛。好消息来了，jQuery Mobile为我们带来了列表视图自动分配器，大家从此得以远离耗时而无聊的枯燥工作。一个属性，简单搞定：
data-autodividers="true"
属性添加前的列表：
属性添加后的列表
请注意，该属性并不会进行排序、分组或过滤等操作。这方面的功能可以借助插件来实现，感兴趣的朋友可以访问以下链接：http://andymatthews.net/code/jqm-tinysort/。
只读列表
jQuery Mobile提供“只读”列表视图，但所谓只读倒不能简单理解成无法进行互动操作。1.2版本删除了列表渐变这一功能，每行内容都采用平滑彩色方案，这应该会给用户带来更好的视觉感受。
更好的表单元素宽度调整机制
1.2版本修复了表单元素方面的一个小问题，这样子元素将不再会在某些情况下错误占用母元素的全部宽度。
添加额外设备
大家可能已经注意到，几乎每一天都有新设备被添加到支持列表当中。jQuery Mobile团队始终兢兢业业地对这类新设备进行测试。新添加的A级平台列表包含以下设备/操作系统/浏览器：iOS 6、Android 4.1（果冻豆）、Tizen、Android版火狐以及Kindle Fire HD。
全部升级内容清单
大家可以在jQuery Mobile的官方博客中找到关于此次升级的全部内容清单（网址为：http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/#changelog）。
希望这一次的大规模更新有助于改善大家的应用程序产品。请记住，jQuery Mobile团队就在各位身边！如果朋友们在使用过程中需要某些额外功能，可以在下面的网址中创建话题、直接与项目开发人员们交涉（https://github.com/jquery/jquery-mobile）。当然，能在他们提供的反馈资料中加入我们自己编写的实用代码就更好啦！
原文链接：