2023年6月21日发(作者：)
jQueryMobile1.2更新⼀览更好的表单调整机制 不久前，jQuery开发团队刚刚发布jQuery Mobile 1.2，新版本带来了多项堪称神奇的变化。在本⽂中，我将带⼤家⼀起体验新版本给开发者带来的新⼯具，并对可能给jQuery Mobile应⽤程序带来影响的增强功能逐⼀加以剖析。闲话少叙，咱们马上开始。
在开始之前，进⾏下载⾃然是⾸要⼯作。⼤家可以访问jQuery Mobile官⽅下载页⾯，并根据⾃⼰的需求选择要下载的项⽬。当然，直接使⽤下⽂所提供的样板代码也是可⾏的。
另外，我们在开始之前再聊⼏句由jQuery Mobile团队提供的下载⽣成器。尽管仍处于测试阶段，但这款⼯具已经允许⽤户任何选择想要下载的jQuery Mobile项⽬。⽆论是特殊事件、转移、表单元素还是窗⼝部件，只要⼤家觉得⽤不上，都可以从下载列表中取消掉。这⼀设定对于那些专注于打造⾼性能应⽤程序的开发者朋友来说还是很有意义的。
各类组件
组件是任何⼀款jQuery Mobile应⽤程序的真正核⼼，可以说正是它们构成了最直观的的页⾯内容以及⽤户交互必不可少的操作内容。jQuery Mobile团队在各类组件的创建、测试及改进⼯作上花费了⽆数个⼩时，借以确保这些⼩⼯具能够以最佳状态满⾜使⽤者的需要。在1.2版本中，开发团队抛出了⼀款令所有开发者为之疯狂、同时也期盼已久的组件：弹出模块。
弹出模块
弹出模块可以被看作是覆盖于其它页⾯及内容之上的⼀⼩块独⽴页⾯，它们⼀般被⽤于显⽰⼯具提⽰、照⽚、地图及其它额外内容。这类信息虽然并没有重要到值得额外开启新页⾯，但对⽤户来说仍然是种不可或缺的描述及说明机制。jQuery Mobile 1.2在弹出模块的实现⽅⾯堪称完美，下⾯我们将⼀同学习如何快速为应⽤程序添加弹出模块项⽬。
提醒各位，为了⽅便起见，后⽂中所使⽤的所有代码都将使⽤以下HTML样板。jQuery Mobile CSS及JS⽂件（包括jQuery）也通过jQuery CDN给出了链接，⽬的在于最⼤程度简化代码内容。
在应⽤程序中添加弹出页⾯需要分两个步骤进⾏。⾸先，⼤家需要设定⼀些条件来触发弹出模块，通常情况下我们可以使⽤链接、按钮或者其它什么能与⽤户交互的视觉元素。要触发对应元素，我们要为其添加以下属性：
data-rel="popup"
接下来，我们还需要设定显⽰内容。内容多种多样，从div、菜单、表单甚⾄是照⽚都能实现。内容元素也要有⾃⼰的属性：
data-role="popup"
最后，对于简单的链接按钮，其href属性必须与显⽰内容的id相吻合。下⾯我们将以上步骤汇总起来，看看完整的实现过程：
This is a completely basic popup, no options set.
通过上述代码，⼤家应该会看到的页⾯：
如图所⽰
⼯具提⽰
现在⼤家已经学会了如何创建弹出模块，接着咱们再来尝试其它⼀些可能性。最常见的形式当然要数⼯具提⽰了：⽤户点击对应按钮、应⽤即弹出与之相关的说明或补充⽂字。代码设置与之前⼀样：
You found out more!.
这⼀次，我们使⽤jQuery Mobile中的e样式来打造更为美观的界⾯造型。这有助于⼤家理解弹出模块在jQuery Mobile中的优先级别，我们可以将其像页⾯中的任何其它元素⼀样进⾏处理。
菜单
接下来我们再来尝试⼀些更复杂的内容：菜单。利⽤菜单实现页⾯导航是⽬前最流⾏的开发模式，⽤户能够通过触控随意实现需要的功能。那么菜单与弹出模块相结合会迸发出怎样的⽕花？
得到的输出效果应该如下图所⽰：
如图所⽰
⼤家也可以利⽤1.2版本中新加⼊的的可折叠列表功能，下⾯列举⼀个简单实例：
输出结果如下所⽰：
如图所⽰
这⾥需要注意的是listview或者列表边⾓必须符合data-inset="true"，否则结果将⽆法正确显⽰。⼤家亲⾃尝试就会明⽩其中的区别。
表单
另⼀套颇为流⾏的UX⽅案是在⼿势悬念在特定页⾯元素上⽅时显⽰登录表单，现在有了弹出模块的⽀持，我们也能够在jQuery Mobile的帮助下实现这类设计。下⾯列出的是⼀套简单的⽤户名/密码输⼊表单：
其输出效果如下所⽰：
如图所⽰
在默认情况下，弹出模块会居于屏幕正中、覆盖掉触发新框体的页⾯元素。在接下来的三个实例中，我将具体解释另⼀项可选属性的作⽤——这就是data-position-to="window"，它作⽤于触发弹出模块的元素。⼤家可以将该属性添加到上图的Login按钮当中，看看结果会有怎样的变化。
对话框
Web应⽤通常需要具备与⽤户交互的能⼒。我们刚刚讨论了⼀种常见的实现⽅式：登录表单。但在某些情况下，我们还需要为有疑问的⽤户提供⼀些⽂字说明。⾯对这类需求，对话框就成了最完美的解决⽅案；所有必要的提⽰信息都能以此为载体向⽤户发布。那么对话框的代码要如何编写呢？下⾯咱们⼀起来看：
Delete Page?
在弹出内容容器当中，⼤家要注意我们所⽤到的另⼀项新属性：data-overlay-theme="a"。该属性适合使⽤在背景图案⾊调较暗的对话框当中。由于对当前桌⾯主题影响较⼤，因此各位在将该属性对话框与由ThemeRoller创建的主题相结合时⼀定要谨慎。
图⽚
我已经⽆数次听到jQuery Mobile开发⼈员的抱怨，他们对于优秀图⽚库功能的渴望给我留下了深刻印象。尽管1.2版本中的弹出模块还不⾜以完美承担少量图⽚的处理⼯作，但它在图⽚缩放及详细浏览⽅⾯的功能已经相当令⼈满意。更重要的是，其实现⽅式极为简单；请看下列代码：
以上代码为我们提供了⼀套居中式图⽚显⽰模块，窗⼝关闭按钮也已经包含在内。
如图所⽰
这到底是如何实现的？在弹出模块范畴内，anchor标签所代表的属性在运⾏中与其它页⾯位置属性略有不同。具体⽽⾔，ui-btn-right类会将其它图形元素放置于图⽚的四⾓⽽⾮侧⾯位置，同时data-icon与data-iconpos两种属性则允许我们把按钮设定为类似于其它常⽤按钮的外观风格。
如果⼤家有⼼，弹出模块的功能还具备相当⼤的挖掘潜⼒——包括显⽰内嵌视频甚⾄互动地图在内的⼀系列视觉特性都能够实现。要了解详细信息，⼤家不妨阅读jQuery Mobile说明⽂档中关于弹出模块的具体解释。
可折叠式列表视图
1.2版本的另⼀项伟⼤特性就是赋予开发者将可折叠集合与列表视图相结合的能⼒。我们将其称为“可折叠式列表视图”，jQueryMobile团队还为⼤家带来了全新的配套⼯具。这些新玩意要怎么⽤？问得好，下⾯我就向各位展⽰如何轻松创建列表并将其包含在可折叠集合当中。可折叠式列表视图还⽀持多种列表——相信⼤家⼀定迫不及待了，咱们马上开始！
上述代码所输出的可折叠式列表视图如下所⽰：
增强功能
除了新的功能组件，jQuery Mobile 1.2还对原有功能进⾏了⼀系列卓有成效的增强。下⾯我们就⼀起来看看其中最具价值的主要内容。 jQuery⽀持变化
1.2版本中幅度最⼤的改进当数添加进了对jQuery 1.8的⽀持。通过对（jQuery选择器引擎）的全⾯重写，新版本获得了显着的性能提升，其它多个⽅⾯也得到相应增强。
但jQuery Mobile团队最终决定放弃对jQuery 1.6的⽀持可能会给许多⽤户带来困扰。对于某些还在使⽤旧版本jQuery的开发者⽽⾔，这⽆疑是个坏消息。不过有得必有失，我们也没必要对此过分耿耿于怀。
列表视图⾃动分配器
如果⼤家所管理的列表在⼈物、地点或其它事物等内容⽅⾯不断进⾏变化，那么肯定会对动态列表视图标题所带来的编码难题感到头痛。好消息来了，jQuery Mobile为我们带来了列表视图⾃动分配器，⼤家从此得以远离耗时⽽⽆聊的枯燥⼯作。⼀个属性，简单搞定： data-autodividers="true"
属性添加前的列表：
属性添加后的列表
请注意，该属性并不会进⾏排序、分组或过滤等操作。
jQuery Mobile提供“只读”列表视图，但所谓只读倒不能简单理解成⽆法进⾏互动操作。1.2版本删除了列表渐变这⼀功能，每⾏内容都采⽤平滑彩⾊⽅案，这应该会给⽤户带来更好的视觉感受。
2023年6月21日发(作者：)
jQueryMobile1.2更新⼀览更好的表单调整机制 不久前，jQuery开发团队刚刚发布jQuery Mobile 1.2，新版本带来了多项堪称神奇的变化。在本⽂中，我将带⼤家⼀起体验新版本给开发者带来的新⼯具，并对可能给jQuery Mobile应⽤程序带来影响的增强功能逐⼀加以剖析。闲话少叙，咱们马上开始。
在开始之前，进⾏下载⾃然是⾸要⼯作。⼤家可以访问jQuery Mobile官⽅下载页⾯，并根据⾃⼰的需求选择要下载的项⽬。当然，直接使⽤下⽂所提供的样板代码也是可⾏的。
另外，我们在开始之前再聊⼏句由jQuery Mobile团队提供的下载⽣成器。尽管仍处于测试阶段，但这款⼯具已经允许⽤户任何选择想要下载的jQuery Mobile项⽬。⽆论是特殊事件、转移、表单元素还是窗⼝部件，只要⼤家觉得⽤不上，都可以从下载列表中取消掉。这⼀设定对于那些专注于打造⾼性能应⽤程序的开发者朋友来说还是很有意义的。
各类组件
组件是任何⼀款jQuery Mobile应⽤程序的真正核⼼，可以说正是它们构成了最直观的的页⾯内容以及⽤户交互必不可少的操作内容。jQuery Mobile团队在各类组件的创建、测试及改进⼯作上花费了⽆数个⼩时，借以确保这些⼩⼯具能够以最佳状态满⾜使⽤者的需要。在1.2版本中，开发团队抛出了⼀款令所有开发者为之疯狂、同时也期盼已久的组件：弹出模块。
弹出模块
弹出模块可以被看作是覆盖于其它页⾯及内容之上的⼀⼩块独⽴页⾯，它们⼀般被⽤于显⽰⼯具提⽰、照⽚、地图及其它额外内容。这类信息虽然并没有重要到值得额外开启新页⾯，但对⽤户来说仍然是种不可或缺的描述及说明机制。jQuery Mobile 1.2在弹出模块的实现⽅⾯堪称完美，下⾯我们将⼀同学习如何快速为应⽤程序添加弹出模块项⽬。
提醒各位，为了⽅便起见，后⽂中所使⽤的所有代码都将使⽤以下HTML样板。jQuery Mobile CSS及JS⽂件（包括jQuery）也通过jQuery CDN给出了链接，⽬的在于最⼤程度简化代码内容。
在应⽤程序中添加弹出页⾯需要分两个步骤进⾏。⾸先，⼤家需要设定⼀些条件来触发弹出模块，通常情况下我们可以使⽤链接、按钮或者其它什么能与⽤户交互的视觉元素。要触发对应元素，我们要为其添加以下属性：
data-rel="popup"
接下来，我们还需要设定显⽰内容。内容多种多样，从div、菜单、表单甚⾄是照⽚都能实现。内容元素也要有⾃⼰的属性：
data-role="popup"
最后，对于简单的链接按钮，其href属性必须与显⽰内容的id相吻合。下⾯我们将以上步骤汇总起来，看看完整的实现过程：
This is a completely basic popup, no options set.
通过上述代码，⼤家应该会看到的页⾯：
如图所⽰
⼯具提⽰
现在⼤家已经学会了如何创建弹出模块，接着咱们再来尝试其它⼀些可能性。最常见的形式当然要数⼯具提⽰了：⽤户点击对应按钮、应⽤即弹出与之相关的说明或补充⽂字。代码设置与之前⼀样：
You found out more!.
这⼀次，我们使⽤jQuery Mobile中的e样式来打造更为美观的界⾯造型。这有助于⼤家理解弹出模块在jQuery Mobile中的优先级别，我们可以将其像页⾯中的任何其它元素⼀样进⾏处理。
菜单
接下来我们再来尝试⼀些更复杂的内容：菜单。利⽤菜单实现页⾯导航是⽬前最流⾏的开发模式，⽤户能够通过触控随意实现需要的功能。那么菜单与弹出模块相结合会迸发出怎样的⽕花？
得到的输出效果应该如下图所⽰：
如图所⽰
⼤家也可以利⽤1.2版本中新加⼊的的可折叠列表功能，下⾯列举⼀个简单实例：
输出结果如下所⽰：
如图所⽰
这⾥需要注意的是listview或者列表边⾓必须符合data-inset="true"，否则结果将⽆法正确显⽰。⼤家亲⾃尝试就会明⽩其中的区别。
表单
另⼀套颇为流⾏的UX⽅案是在⼿势悬念在特定页⾯元素上⽅时显⽰登录表单，现在有了弹出模块的⽀持，我们也能够在jQuery Mobile的帮助下实现这类设计。下⾯列出的是⼀套简单的⽤户名/密码输⼊表单：
其输出效果如下所⽰：
如图所⽰
在默认情况下，弹出模块会居于屏幕正中、覆盖掉触发新框体的页⾯元素。在接下来的三个实例中，我将具体解释另⼀项可选属性的作⽤——这就是data-position-to="window"，它作⽤于触发弹出模块的元素。⼤家可以将该属性添加到上图的Login按钮当中，看看结果会有怎样的变化。
对话框
Web应⽤通常需要具备与⽤户交互的能⼒。我们刚刚讨论了⼀种常见的实现⽅式：登录表单。但在某些情况下，我们还需要为有疑问的⽤户提供⼀些⽂字说明。⾯对这类需求，对话框就成了最完美的解决⽅案；所有必要的提⽰信息都能以此为载体向⽤户发布。那么对话框的代码要如何编写呢？下⾯咱们⼀起来看：
Delete Page?
在弹出内容容器当中，⼤家要注意我们所⽤到的另⼀项新属性：data-overlay-theme="a"。该属性适合使⽤在背景图案⾊调较暗的对话框当中。由于对当前桌⾯主题影响较⼤，因此各位在将该属性对话框与由ThemeRoller创建的主题相结合时⼀定要谨慎。
图⽚
我已经⽆数次听到jQuery Mobile开发⼈员的抱怨，他们对于优秀图⽚库功能的渴望给我留下了深刻印象。尽管1.2版本中的弹出模块还不⾜以完美承担少量图⽚的处理⼯作，但它在图⽚缩放及详细浏览⽅⾯的功能已经相当令⼈满意。更重要的是，其实现⽅式极为简单；请看下列代码：
以上代码为我们提供了⼀套居中式图⽚显⽰模块，窗⼝关闭按钮也已经包含在内。
如图所⽰
这到底是如何实现的？在弹出模块范畴内，anchor标签所代表的属性在运⾏中与其它页⾯位置属性略有不同。具体⽽⾔，ui-btn-right类会将其它图形元素放置于图⽚的四⾓⽽⾮侧⾯位置，同时data-icon与data-iconpos两种属性则允许我们把按钮设定为类似于其它常⽤按钮的外观风格。
如果⼤家有⼼，弹出模块的功能还具备相当⼤的挖掘潜⼒——包括显⽰内嵌视频甚⾄互动地图在内的⼀系列视觉特性都能够实现。要了解详细信息，⼤家不妨阅读jQuery Mobile说明⽂档中关于弹出模块的具体解释。
可折叠式列表视图
1.2版本的另⼀项伟⼤特性就是赋予开发者将可折叠集合与列表视图相结合的能⼒。我们将其称为“可折叠式列表视图”，jQueryMobile团队还为⼤家带来了全新的配套⼯具。这些新玩意要怎么⽤？问得好，下⾯我就向各位展⽰如何轻松创建列表并将其包含在可折叠集合当中。可折叠式列表视图还⽀持多种列表——相信⼤家⼀定迫不及待了，咱们马上开始！
上述代码所输出的可折叠式列表视图如下所⽰：
增强功能
除了新的功能组件，jQuery Mobile 1.2还对原有功能进⾏了⼀系列卓有成效的增强。下⾯我们就⼀起来看看其中最具价值的主要内容。 jQuery⽀持变化
1.2版本中幅度最⼤的改进当数添加进了对jQuery 1.8的⽀持。通过对（jQuery选择器引擎）的全⾯重写，新版本获得了显着的性能提升，其它多个⽅⾯也得到相应增强。
但jQuery Mobile团队最终决定放弃对jQuery 1.6的⽀持可能会给许多⽤户带来困扰。对于某些还在使⽤旧版本jQuery的开发者⽽⾔，这⽆疑是个坏消息。不过有得必有失，我们也没必要对此过分耿耿于怀。
列表视图⾃动分配器
如果⼤家所管理的列表在⼈物、地点或其它事物等内容⽅⾯不断进⾏变化，那么肯定会对动态列表视图标题所带来的编码难题感到头痛。好消息来了，jQuery Mobile为我们带来了列表视图⾃动分配器，⼤家从此得以远离耗时⽽⽆聊的枯燥⼯作。⼀个属性，简单搞定： data-autodividers="true"
属性添加前的列表：
属性添加后的列表
请注意，该属性并不会进⾏排序、分组或过滤等操作。
jQuery Mobile提供“只读”列表视图，但所谓只读倒不能简单理解成⽆法进⾏互动操作。1.2版本删除了列表渐变这⼀功能，每⾏内容都采⽤平滑彩⾊⽅案，这应该会给⽤户带来更好的视觉感受。
发布评论