七、使用 jQuery Mobile 构建令人印象深刻的用户体验
信不信由你，对于一个母亲获得艺术学校奖学金、父亲从事广告工作多年的人来说，我并没有太多的艺术天赋。我大部分的编程努力都集中在功能上，而不是风格上…结果好坏参半。一方面，许多人称赞这种极简设计——例如，我的一个名为快餐卡路里查询的应用只不过是两个下拉框和几个按钮。它有超过 1000 条评论，在安卓市场上的评分为 4.3 分。然而，对于每一个欢呼“如此容易导航，方便的信息！”(实际回顾)，我得到的是不理解为什么看起来不好看的人。
值得庆幸的是，在 web 应用领域，有一些选项可以让像我这样的设计“懒汉”看起来像是我们支付了一些非常高的价格让事情看起来华丽的设计师。事实上，有很多工具可以免费实现这个目标，在这一章中，我们将深入了解其中一个工具:jQuery Mobile(http://jquerymobile.com)。这绝不是你唯一的选择。其他想到的还有:Wink 工具包([www.winktoolkit.org/](http://www.winktoolkit.org/))、Sencha Touch ( [www.sencha.com/products/touch/](http://www.sencha.com/products/touch/))、Zepto.js ( [http://zeptojs.com](http://zeptojs.com))、Jo ( [http://joapp.com/](http://joapp.com/))、xui.js ( [http://xuijs.com/](http://xuijs.com/))和 JQTouch ( [www.jqtouch.com/](http://www.jqtouch.com/))。然而，就我们的目的而言，jQuery Mobile 在特性和易于配置方面提供了最好的性价比。所以——让我们开始探索吧！
基础知识
如果您熟悉用于桌面浏览器的 jQuery UI 工具包，那么您应该很快学会 jQuery Mobilepretty！jQuery Mobile 是这样一种框架，它试图将开发移动应用的大量繁琐任务从开发人员手中拿走，并将所有繁重的工作交给框架，这样您就可以将更多的时间放在对您的应用更重要的其他项目和功能上。jQuery Mobile 创建了一系列触摸优化的小部件和用户界面元素，正在迅速成长为移动 javascript 框架领域的顶级竞争者之一。
然而，jQuery Mobile 最好的特性之一是它非常简单且易于修改的模板结构。有了一点 CSS 知识，开发人员可以很容易地修改他们的 jQuery Mobile 主题的样式，使其看起来像他们想要的那样。这对于像我这样喜欢弄脏自己的手，在他们接触到的任何一段代码的内部进行修改的人来说是非常棒的。另一方面，正如我们将很快看到的，创建一个自定义主题一点也不困难——事实上，如果我们不想的话，我们根本不需要接触 CSS！
最重要的是，jQuery Mobile 是一个非常容易安装和运行的框架。开始时，只需在文档头中包含 jQuery Mobile 源文件，然后在 HTML 标记中使用特殊的数据属性。数据属性是 HTML5 的有趣补充。在 XML 和以前版本的 HTML 中，正式定义的属性被用在标签中来描述数据或数据的格式。虽然在以前的 HTML 版本中，总是可以向 HTML 代码中添加自定义属性，但这总是不被接受。而且，通常情况下，如果你的代码通过一个验证程序运行，它最终会到处出错。清单 7–1显示了一个无效的自定义“情绪”属性，而清单 7–2显示了如何在 HTML5 中使用一个有效的“数据-情绪”属性。
清单 7–1。HTML 中一个无效自定义属性的例子
`
Today was an awesome day!
Suspendisse consectetur consequat risus non viverra. Phasellus ligula urna, egestas porttitor facilisis vel, euismod sit...
清单 7–2。html 5中一个有效自定义属性的例子
`
Today was an awesome day!
Suspendisse consectetur consequat risus non viverra. Phasellus ligula urna, egestas porttitor facilisis vel, euismod sit...
让我们看一下前面的代码示例。在编写代码的第一次尝试中，我们创建了一个附加了无效自定义属性的 div 容器，以指示创建该博客条目的个人的心情。虽然没有什么可以阻止我们使用这个异想天开地创建的 mood 属性，但是代码不能用流行的验证引擎进行验证，比如 W3c 标记验证服务([http://validator.w3.org/](http://validator.w3.org/))。这是因为 mood 不是 HTML 规范认可的属性。经过多年来自各地开发人员的抱怨，权力机构决定对我们开发人员有点怜悯，并给了我们最终创建自定义属性以附加到我们代码上的能力。开发人员可以使用这些新的数据属性向他们的标记代码中添加任何类型的数据，这些数据可以用于我们可以想象的任何目的。在我们的第二个例子(清单 7–2)中，我们使用了data-mood属性来记录我们的心情，以一种取悦验证者的方式，同时仍然允许我们根据需要在脚本中使用这些数据！只要我们将前缀“data-”放在想要存储的数据字符串前面，它就是有效的 HTML5 代码。我们可以将它们用作小型数据容器，如下例所示。"
现在，您已经了解了数据属性是如何工作的，以及如何使用它们来丰富我们的移动应用，让我们来看看一些 jQuery 移动代码，并剖析它是如何工作的。
在清单 7–3中，我们将使用 jQuery Mobile 框架显示一个非常简单的页面。您会注意到它使用了许多数据角色属性。
清单 7–3。 来自默认 jQuery 移动样板文件的 HTML 标记示例
`<!DOCTYPE HTML>
Our Super Rad Demo PageWell Then, Soldier...
How goes the day?
© 2011 Dodo Men Ply, Inc.
`
只需前面的几行代码，就可以使用普通的老式 web 浏览器创建非常原始的移动应用外观。这个页面非常简单。首先，我们有一个包含数据属性值“page”的主容器，它是内容的包装器。正如所料，在那之后我们有了我们的“header”，它通常包含页面的标题和人们决定放在那里的任何导航元素。在我们传递了页眉之后，我们开始向页面的主体前进，也称为“内容”数据属性，紧接着是我们的“页脚”
正如我之前所说的，这个标记并没有太多的东西。大多数神奇的事情都发生在幕后，在 jQuery 移动应用的内部工作中。在接下来的几个例子中，我们将探索如何使用 jQuery Mobile，从简单到复杂，然后是自定义主题化！让我们打开可信的网络浏览器，看看这个页面在我们的移动设备上是什么样子的(见图 7–1)！
图 7–1。 由 jQuery Mobile 创建并显示在 Android 2.3.4 手机上的一个看起来非常本地的用户界面
你看到那有多容易了吗？最好的一点是，我们仅仅触及了 jQuery Mobile 的皮毛。只需一点时间，人们就可以轻松地构建出一个功能齐全的移动 web 应用，其中包括漂亮的用户界面元素、模态窗口、对话框、页面转换、导航工具栏以及其他许多东西！让我们再深入一点。
添加多个页面
通常，应用包含不止一个页面！在清单 7–4中，我们将创建一个更高级的 jQuery Mobile 文档，它包含三个页面:主页、关于页面和联系页面。在这个过程中，我们将会比平常多加一些注释，这样您就可以看到代码的哪个部分创建了哪个元素(显示在图 7–2、7–3和7–4中)。这样，如果您想要定制某些元素，您将确切地看到需要修改什么。
清单 7–4。 页面上的所有 UI 元素都是由 jQuery 移动应用创建的
`<!DOCTYPEHTML>
Our Super Rad Demo PageHello World
` 在标题中，我们将在页面顶部的黑条中指定我们想要查看的测试。如果我愿意，我可以包含不止一行文本，黑条会继续增加。然而，这可能会让用户有点分心。 **清单 7–4 续。** *主页面的内容* `About Us
Vivamus sit amet nulla vitae odio ultricies fringilla quis at felis. Integer sagittis eleifend leo, et tempor elit adipiscing in. Pellentesque commodo condimentum pulvinar. Integer vitae tellus ac sapien molestie euismod. Sed a enim ut leo fermentum lobortis ac eget velit. Mauris commodo porta felis id fermentum. Aenean eleifend justo eu sem consectetur auctor. Quisque convallis ullamcorper elementum. Integer hendrerit vehicula nisi eu congue. Integer aliquet quam a arcu cursus ac consequat est pretium. Nam nec pharetra lorem. Maecenas lacinia facilisis eros quis tempor.
Send Us Mail!
`
现在我们已经讨论了代码是如何工作的，让我们看看主页面在Figure 7–8中的样子。
图 7–8。 在 Android 2.3.4 移动设备上查看我们的 jQuery 移动主页
我们将快速跳过“关于”页面，因为这里没有太多的操作。不过，有一点我们将要介绍的美味佳肴。我敢肯定，看到这一页的你可能会问自己，“嘿，他为什么不创造某种视觉线索，可以用来导航回我们所在的上一页？!"(即使你没有想到这一点，你现在已经想到了)好吧，你不用担心！如果您在您的 web 浏览器中加载我们刚刚创建的页面，并查看“关于”页面，您会注意到 jQuery Mobile 非常好地在您的页面中为您包含了一个后退按钮(参见图 7–9)，甚至包含了我提到的正确图标！
图 7–9。 我们的 jQuery Mobile 关于在 Android 2.3.4 移动设备上查看的页面。注意到 jQuery Mobile 自动包含在用户界面中的 back 按钮了吗？
最后，在我们的联系人页面上，我们真正开始享受 jQuery Mobile 提供的一些特性(参见图 7–10)。查看我们的代码，您会看到该页面上有两个数据角色为“fieldcontain”的 div 容器。我相信您现在已经猜到了，这些容器是用来存放和分隔表单输入字段的，这些字段不一定要放在一起。基本上，它是用于我们这些平面设计受损的人的审美。在分离了表单字段之后，我们又有了另一个 div 容器，它保存了 Cancel 和 Submit 按钮。通过将 fieldset 元素分配给 ui-grid-a 的 CSS 类(本例中的“a”代表将用于样式化网格容器的主题)，这些按钮以类似网格的格式放置在页面上。最后，值得注意的是，我们这里的代码将电子邮件表单发送到 nothing (#)，就像它现在所写的那样。在本章的后面，我们将看到如何使用 JavaScript 来处理表单，或者编写一个简单的 PHP 脚本来接收表单数据并进行处理。
如你所见，jQuery Mobile 允许你在很短的时间内创建一个非常漂亮的用户界面！
图 7–10。 我们的 jQuery 移动联系人页面格式整齐，可以在 Android 2.3.4 移动设备上查看
那么，关于这些转变
如果您一直在编写代码，您会注意到上一个示例中的按钮根据我们想要做的事情有不同的转换。动画是移动设计中的一个关键元素，因为它让小屏幕给用户一种三维的感觉，这可以帮助他们理解他们在做什么。默认情况下，jQuery mobile 框架将实现从右到左的滑动过渡，这给用户翻页的感觉。这个框架也很好，当“后退”按钮被按下时，它将反转最初使用的过渡，所以在这种情况下，转向上一页。在清单 7–5中，我创建了一个简单的页面，展示了从第一页到第二页的所有过渡类型。
清单 7–5。 过渡演示 HTML
<!DOCTYPE HTML>
<html>
<head>
<title>This is jQuery's Base Template, Showing off The Transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> `
The Title
This is where we put what we want to talk about on this page, it's going to be great
Pop Page 2Slide Page 2
Slideup Page 2
Slidedown Page 2
Fade Page 2
Flip Page 2
The Title of Page 2
This is where we put what we want to talk about on this page, it's going to be great
Back to page 1版权属于：月萌API www.moonapi.com，转载请注明出处
