2.5 对话框
jQuery Mobile快速入门
对话框与页面相似，只不过对话框的边界是有间距的（inset），从而产生模态对话框（modal dialog）的外观。在对话框的设计方面，jQuery Mobile相当灵活。我们可以创建确认对话框（见图2-9）、警告对话框（见图2-10），甚至是动作表单样式的对话框（见图2-11和图2-12）。
我们可以将一个页面转换为链接或页面组件上的一个对话框。在一个链接中，添加data-rel=“dialog”属性，如程序清单2-5所示。添加这个属性之后，将会自动载入目标页面，并将其增强为一个模态对话框。
程序清单2-5 链接级别的转换
我们也可以在页面容器上配置对话框。将data-role=“dialog”属性添加到页面容器中，当该页面容器组件在载入页面时，其将会被增强为一个模态对话框（见程序清单2-6）。
程序清单2-6 页面级别的转换
带有data-rel=“dialog”属性的任何链接，或者是带有data-role=“dialog”属性的任何页面不会出现在页面访问历史记录中，因此无法添加书签。例如，如果你导航到了一个对话框，关闭该对话框并轻敲浏览器的向前按钮，你无法进入到刚才的那个对话框，因为它不存在于历史记录中。
2.5.1 链接与页面配置的对比
既然有两个选项可用于打开对话框，我们该选择哪一个呢？我个人倾向于选择页面配置（data-role=“dialog”），因为我们只需要在页面容器中配置一次对话框，而且导航到该对话框的按钮也无需任何修改。例如，如果有3个按钮链接到我们的对话框，基于页面的配置则只需要修改一次。而基于链接的配置则需要修改3次，每一次对应一个按钮。
jQuery Mobile对话框API还公开了一个close方法，当需要以程序方式来处理对话框时，可以使用该方法。例如，如果我们想使用程序来处理图2-9中“Agreee”按钮的进程，我们可以处理单击事件，然后处理任何需要的业务逻辑，并在完成之后关闭对话框。
2.5.2 操作表
除了传统的对话框之外，我们还可以将对话框设计为一个操作表（action sheet），见图2-11和图2-12。只需移除标题，添加较少的样式（styling）更新（见程序清单2-7），你的对话框就成为一个操作表。操作表通常用来请求一个来自用户的响应。为了获得最佳的用户体验，建议为操作表使用“向下滑动”转换。为方便起见，当对话框关闭时，会自动应用相反的转换。例如，当你关闭某动作表单时，将会应用“卷起”转换。
程序清单2-7 操作表(ch2/action-sheet1.html)
这也是我们研究的第一个data-theme属性。通过使用该属性，我们可以简单地为所有的jQuery Mobile组件添加对比度和样式。在对话框示例中，我们可以设置背景和按钮的主题。当设计对话框按钮时，通常会为取消按钮和动作按钮的样式添加对比度。jQuery Moible内的主题将在第7章详细讨论。
2.5.3 对话框UX指南
在设计你的UI组件时，一致性是最重要的设计目标。就对话框相关的指南而言，来自苹果的移动界面指南1的一些提示如下所示。
提示：
默认情况下，对话框的最大宽度为500像素。在某些较小的移动设备上显示时，将会铺满整个屏幕；而在台式机或者平板电脑上显示时，则只占据500像素的宽度。如果你想要覆写这个默认的宽度，可以在你的主题中使用如下CSS。
ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 100%; }1．警告
使用警告来显示可以影响应用程序使用的重要信息（见图2-10）。警告不是用户发起的。
警告按钮要么是浅颜色，要么是深颜色。对于单按钮的警告来说，按钮总是浅颜色的。对于一个包含两个按钮的对话框，左边的按钮总是深颜色的，而右边的按钮总是浅颜色的（见图2-9）。
在一个包含两个按钮的对话框中，如果提出了一个肯定的动作，而且用户很有可能会选择这个动作，则取消该动作的按钮应该位于右边，而且是浅颜色的。通常情况下，执行有风险的动作的按钮是红色的。
2．操作表
使用操作表来收集用户发起的任务的确认信息（见图2-11）。操作表也可以针对当前的任务为用户提供一系列选项（见图2-12）。
一个操作表至少包含两个按钮，它可以让用户选择如何完成他们的任务。
包含一个取消按钮，以允许用户放弃任务。取消按钮位于操作表的底部，以促使用户在做出选择之前，阅读了所有的选项。取消按钮的颜色应该与背景的颜色相同。