《jQuery Mobile快速入门》—— 2.5 对话框

简介:

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章,第2.5节,作者:【美】Brad Broulik,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 对话框

jQuery Mobile快速入门
对话框与页面相似,只不过对话框的边界是有间距的(inset),从而产生模态对话框(modal dialog)的外观。在对话框的设计方面,jQuery Mobile相当灵活。我们可以创建确认对话框(见图2-9)、警告对话框(见图2-10),甚至是动作表单样式的对话框(见图2-11和图2-12)。

59da95dc8a0434dedeb2544e1caec0e36b4a1e73

我们可以将一个页面转换为链接或页面组件上的一个对话框。在一个链接中,添加data-rel=“dialog”属性,如程序清单2-5所示。添加这个属性之后,将会自动载入目标页面,并将其增强为一个模态对话框。

程序清单2-5 链接级别的转换

0da7ac4a0cec9a3e159b3060fba024ea74ef49a7

我们也可以在页面容器上配置对话框。将data-role=“dialog”属性添加到页面容器中,当该页面容器组件在载入页面时,其将会被增强为一个模态对话框(见程序清单2-6)。

程序清单2-6 页面级别的转换

801e68610bfa4bf122ee2cc29b7c2e9f1a1bb7e3

带有data-rel=“dialog”属性的任何链接,或者是带有data-role=“dialog”属性的任何页面不会出现在页面访问历史记录中,因此无法添加书签。例如,如果你导航到了一个对话框,关闭该对话框并轻敲浏览器的向前按钮,你无法进入到刚才的那个对话框,因为它不存在于历史记录中。

2.5.1 链接与页面配置的对比

既然有两个选项可用于打开对话框,我们该选择哪一个呢?我个人倾向于选择页面配置(data-role=“dialog”),因为我们只需要在页面容器中配置一次对话框,而且导航到该对话框的按钮也无需任何修改。例如,如果有3个按钮链接到我们的对话框,基于页面的配置则只需要修改一次。而基于链接的配置则需要修改3次,每一次对应一个按钮。

jQuery Mobile对话框API还公开了一个close方法,当需要以程序方式来处理对话框时,可以使用该方法。例如,如果我们想使用程序来处理图2-9中“Agreee”按钮的进程,我们可以处理单击事件,然后处理任何需要的业务逻辑,并在完成之后关闭对话框。

891ff4a7ef3686b4eb0bd42a32a1de1c1985aadf

2.5.2 操作表

除了传统的对话框之外,我们还可以将对话框设计为一个操作表(action sheet),见图2-11和图2-12。只需移除标题,添加较少的样式(styling)更新(见程序清单2-7),你的对话框就成为一个操作表。操作表通常用来请求一个来自用户的响应。为了获得最佳的用户体验,建议为操作表使用“向下滑动”转换。为方便起见,当对话框关闭时,会自动应用相反的转换。例如,当你关闭某动作表单时,将会应用“卷起”转换。

2de7aafd1191a0c7c401374ccac163c9467ee296

程序清单2-7 操作表(ch2/action-sheet1.html)

43e88be904a3702b123a883d6ab1d01f8c5e0af0

这也是我们研究的第一个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)。
一个操作表至少包含两个按钮,它可以让用户选择如何完成他们的任务。
包含一个取消按钮,以允许用户放弃任务。取消按钮位于操作表的底部,以促使用户在做出选择之前,阅读了所有的选项。取消按钮的颜色应该与背景的颜色相同。

相关文章
|
2月前
|
JavaScript 前端开发 API
漂亮的jQuery对话框插件Dialogify
这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。
53 7
|
8月前
|
JavaScript 前端开发 开发者
jQuery 下载与快速入门指南
jQuery 下载与快速入门指南
357 0
|
设计模式 JavaScript 前端开发
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
135 0
|
JavaScript 前端开发 API
JavaWeb快速入门--jQuery
JavaWeb快速入门--jQuery
89 0
|
JavaScript 索引
JavaWeb--快速入门jQuery(三)
JavaWeb--快速入门jQuery(三)
142 0
JavaWeb--快速入门jQuery(三)
|
JavaScript 前端开发 数据安全/隐私保护
JavaWeb--快速入门jQuery(二)
JavaWeb--快速入门jQuery(二)
163 0
JavaWeb--快速入门jQuery(二)
|
JavaScript 前端开发 API
JavaWeb--快速入门jQuery(一)
JavaWeb--快速入门jQuery(一)
154 0
JavaWeb--快速入门jQuery(一)
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
199 0
一篇文章带你用jquery mobile设计颜色拾取器
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
180 0
手把手教你用jQuery Mobile做相册