第 4 章 ? 页面与对话框 ? 本章将以实例介绍在jQuery Mobile中使用page控件的方法。page控件不仅是jQuery Mobile中非常重要的控件，更是必不可少的控件。虽然它的用法非常简单，却能反映出程序员对编码理解的深度。 本章还将介绍利用原生jQuery提高页面交互性的例子。本章主要的知识点包括： ? page控件，包括page的高级用法，以及如何人为修改jQuery Mobile中已定义的属性 ? 适应各种屏幕的方法 ? 利用链接来实现页面间切换的方法 ? 对话框的使用方法 4.1 依然从hello world开始 有人说每个程序员都曾经有过改变世界的梦想，笔者认为，这与程序员年轻时编写的第一个程序有着莫大的关系。一句简单的hello world让年轻的心开始相信梦想，用一种低调的壮志凌云向世界展示自己的存在。那么，今天就让我们从hello world开始逐梦之旅吧。 【范例4-1 简单的页面—hello world】 01 02 03 04 05 //本节的重点所在 06 hello world //title属性在应用中是不显示的 07 //jQuery Mobile样式文件 08 //引入jQuery脚本 09 //引入jQuery Mobile脚本 10 11 12
//此处为页面控件 13 hello world //在空间中插入内容hello world 14
15 16 程序运行结果如图4-1所示。 该例虽然看上去非常简单，但是它就像C语言中的hello world一样，是今后利用jQuery Mobile进行应用开发时最基础的模板。 这实际上就是一个HTML页面，但是仔细观察会发现第5行的代码比较陌生： 这行代码限定了页面的宽度要与设备的宽度保持一致。因为移动设备的种类实在太多，作为开发者，肯定没有办法考虑到每一种设备的兼容性，因此只有借助于HTML本身来帮助我们。 接下来还有一个更加令人感到陌生的属性initial-scale=1，这个属性又是什么意思呢？可将1改为2运行之后看一下效果，结果如图4-2所示。 图4-1 hello world 图4-2 修改后的hello world 可以看到屏幕中的字体放大了一倍。原来initial-scale=1的作用是规定页面在加载时所要放大的倍数，等于1时即为保持原尺寸不变。 目前，电脑屏幕的分辨大多是1366×768像素，而最近一些以高分辨率为亮点的智能手机的分辨率已经达到了720×1280像素，与此同时大多数人所使用手机的分辨率还停留在一个较低的水平。这就导致了如果没有一种切实可行的手段来区分这些用户，开发人员就无法做到真正完美的用户体验。 那么到底有没有这样一种方法呢？当然是有的，只要通过修改initial-scale属性的值来放大页面的内容尺寸，就能够很好地实现不同设备上的兼容问题。在本章最后的综合项目实例中将给出一个这样的例子。 meta是HTML中非常重要的一个标签，但是它的应用却常常被开发者所忽略。 4.2 利用jQuery脚本DIY闪光灯效果 在电影的开头常常会播放一段非常简短但是又特别炫目的动画来吸引观众的注意力，笔者一直对这样炫目的镜头向往不已，但是这些效果都需要专业人士通过专业的设备来完成，这不免令人遗憾。不过没有关系，经过笔者多年的研究，有一些办法可以实现一些简单的影视特效。如本节要介绍的闪光灯效果的代码。 实际上原理非常简单，就是利用jQuery不断地切换页面的背景颜色，代码如下： 【范例4-2 闪光灯】 01 02 //注意本书的html头标记都是HTML 5标记 03 04 05 06 07 不断闪动的页面 08 09 10 11 12 28 29 30
31
32 33 运行之后可以看到页面以很快的速度闪动，颜色不断地在红黄两色之间切换。其中第12~27行即为使用的脚本程序。程序将在页面加载完成后开启setInterval()计数器，其中的100表示的是计数器运行的间隔为100ms，设置了一个临时变量i用来记录当前的状态，当背景变为红色时将i置为0，变成黄色再还原为1。$("div")选择了页面中的所有div标签，由于该页面中只有一个div，因此选中了page控件，然后利用CSS改变页面的属性。 既然这是一本介绍jQuery Mobile的书，介绍这样的内容有跑题的嫌疑，但是真相并非如此。笔者也曾想过选用page颜色为黑白两色的两套主题，然后利用jQuery来修改page的主题属性应该是最完美的方法，为此，曾经做出如下代码： 【范例4-3 利用jQuery Mobile主题的闪光灯】 01 02 03 04 05 06 使用jQuery Mobile主题的闪光灯 07 08 09 10 11 27 28 29
30
31 32 运行之后页面停在开始的黑色背景处，为了确认jQuery确实起到了修改页面属性的作用，笔者对jQuery脚本做了一点修改，使其在运行时能够以对话框的形式显示出page控件当前所使用的主题： 运行结果如图4-3所示。 图4-3 显示page的主题结果 因为在本节中刚刚介绍了类似的脚本，这里不再赘述，读者可以清楚地看到page的主题确实改变了。可是为什么页面的颜色没有变化呢？ 其原因在解释jQuery Mobile的原理时已经介绍过。就是在页面加载时，jQuery会搜索页面中所有data-role为page的元素并对其加载相应的主题，之后如果不重新运行加载脚本，那么无论元素的属性如何变化，页面上的显示是不会发生变化的。当然，也可以在文件中重新添加加载的脚本，但是笔者一直认为jQuery Mobile的出现是为了解放程序员使他们远离这样的工作，因此这里应该直接修改page所对应的CSS属性而不考虑jQuery Mobile的主题设置。 同样，在实际开发中常常也需要在运行中对一些元素的样式进行修改，比如皮肤的切换，建议大家直接对元素的CSS进行修改，这是一种非常简单而行之有效的方法，同时还要记得做好注释，以方便维护。 4.3 不断切换的场景 作为一款真正具有使用价值的应用，首先应该至少有两个页面，通过页面的切换来实现更多的交互。比如手机人人网，打开以后先进入登录页面，登录后会有新鲜事，然后拉开左边的面板，能看到相册、悄悄话、应用之类的其他内容。 在jQuery Mobile中，页面的切换是通过链接来实现的，这跟HTML完全一样。有所不同的是，jQuery Mobile为了使开发者能够创造出更好的交互性，提供了10种不同的切换效果。下面来看一个例子： 【范例4-4 jQuery Mobile中的场景切换】 01 02 03 04 05 06 页面间的切换 07 08 09 10 11 12 13
14 15 页面间的切换 16 17 fade 18 19 pop 20 21 flip 22 23 turn 24 25 flow 26 27 slidefade 28 29 slide 30 31 slidedown 32 33 slideup 34 35 none 36
37 38 除此之外，还需要另外一个页面demo.html： 无标题文档

快到我碗里来

运行效果如图4-4和图4-5所示。 图4-4 切换前的页面 图4-5 demo.html 范例4-4中第14~35行实际上在做同一件事情，即实现从index.html页面到demo.html页面的切换。在这里特别对这10种切换效果进行简短的说明： 页面间的切换 可以清楚地看到demo.html页面有一个渐显的动画效果。 fade 运行后发现与不加入data-transition属性的效果相同，也就是说，在jQuery Mobile中，将会默认给转场加入渐显渐隐的动画效果。 pop demo页面在原页面的中央部分渐渐变大最终覆盖整个页面。 flip demo页面在原页面中央最初以一个竖条的方式出现，先向两端扩张，当放大到正常页面比例后渐渐变大，直至覆盖整个页面。 turn demo页面在原页面中央最初以一个竖条的方式出现，纵向进行翻转后放大到覆盖整个页面。 flow demo页面在原页面中央部分渐渐变大并逐渐覆盖整个页面，同时可以看见原页面逐渐缩小直至完全被demo页面中的内容覆盖。 slidefade demo页面在原页面右侧出现，移动至中心，并在这一过程中渐显。 slide demo页面在原页面右侧出现，移动至中心。 slideup demo页面在原页面下方出现，并向上移动至中心。 slidedown demo页面在原页面上方出现，并向下移动至中心。 none 在以上的10种动画中，除fade与none两种效果是所有浏览器均支持的，其他8种效果的实现均需要设备浏览器具有3D支持。 jQuery Mobile的官方文档中给出了一种应对不兼容情况的方法，即在CSS文件中加入下面的代码，经笔者实践，确实能够在一定程度上解决切换时的屏闪问题。 .ui-page { -WebKit-backface-visibility: hidden; } 但是要想真正从根本上解决页面切换时闪屏的问题，只能依靠硬件的发展。 4.4 整人游戏：我不是弱智！ 笔者以前经常被QQ控件或各种论坛上的某个标题所吸引，打开之后却发现网页中弹出一个对话框，必须不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程，可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享下面的例子。 在Sublime中编辑4个文件，分别为index.html、question.html、confirm.html、result.html。下面给出具体代码。 【范例4-5 游戏的开始页面index.html】 01 02 03 04 05 06 游戏开始 07 08 09 10 11 12 13
14 开始游戏 15
16 17 【范例4-6 询问读者是否是弱智的页面question.html】 01 02 03 04 05 06 老实交代！你到底是不是弱智！ 07 08 09 10 11 12 13
14

老实交代！你到底是不是弱智！

15 这你都知道！！！！ //跳至最终页面 16 死不承认！ //继续循环 17
18 19 【范例4-7 另一个询问页面confirm.html】 01 02 03 04 05 06 老实交代！你到底是不是弱智！ 07 08 09 10 11 12 13
14

老实交代！你到底是不是弱智！

15 我承认，我是//跳至最终页面 16 我不是！ //继续循环 17
18 19 【范例4-8 游戏结束页面result.html】 01 02 03 04 05 06 你这个弱智 07 08 09 10 11 12 13
14

早点承认不就好了么，何必这么麻烦！

15
16 17 运行后的结果如图4-6~图4-9所示。 首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示的页面，游戏结束，否则一直循环。 图4-6 游戏开始图 4-7 对话框提问用户 图4-8 反复提问 图4-9 最后结果 各位聪明而又细心的读者想必已经发现，本节使用的链接代码中又加入了一个新的属性data-rel="dialog"。这句代码是干什么用的呢？看上去并没有产生特殊效果。 首先dialog就是jQuery Mobile已经给用户定义好了对话框控件，使用它可以实现一些与一般页面不同的交互效果，读者可以自己尝试。当运行到图4-9所示的游戏结束页面时，点击手机上的返回键，会发现页面返回到了图4-6所示的界面。然后去掉data-rel="dialog"，再看效果会发现，点击返回键后会完整地重复图4-7以及图4-8所示的界面。 读者可以想象，这跟我们在PC上浏览网页时的返回按钮非常相似，由于浏览器会使用哈希来记录已经访问过的页面，从而使其在返回时能够记录已经访问过的页面。而对于以对话框形式打开的页面，则不记录其哈希值，浏览器将不会对这些页面进行记录。 当然，有一部分人会通过“返回”的方式来重复答题以获得虚假的高分。那么，如果在这里使用对话框控件就能比较容易地解决这一难题。 为了加快页面的加载速度，可以尝试将多个page放在同一个页面中，这种方法将会在后面的章节进行介绍。 4.5 警告！你的手机遭到入侵 刚刚完成了上一节的实例，本节中再介绍一种在APP中整蛊的玩法，不过这一次我们要扮演的角色是黑客。 【范例4-9 你的手机已被入侵】 01 02 03 04 05 06 遭到入侵的手机 07 08 09 10 11 19 20 21
22 23
24 25 运行效果如图4-10所示。 图4-10 运行效果 其中的setInterval()计时器在本章4.2节已经介绍过，而alert()也同样使用过，这里单独把它拿出来是因为笔者认为这样的对话框在今后的实际开发中非常重要。 请读者掏出自己的手机，以最快的速度登录手机QQ然后退出，这时是不是会弹出一个对话框确认是不是真的要退出呢？仔细观察这个对话框与上一节中介绍过的dialog控件有何不同。 没错！这个对话框弹出后，页面仍然保持在当前页面而没有发生跳转，这在应用中进行确认操作时非常实用。 最后希望读者在完成本节的学习之后，能够在自己的手机中找一找这两种对话框的例子，从而加深理解。 4.6 实现渐变的背景 前面的内容介绍了在页面中使用page控件的方法，也介绍了如何通过设置主题来让页面拥有不同的颜色，但很多时候，还需要更加绚丽的方式。直接使用CSS设置背景图片是一个非常好的方法，可是会造成页面加载缓慢。这时就可以使用CSS的渐变效果，具体实现方法如范例4-10所示。 【范例4-10 利用CSS样式实现页面背景的渐变】 01 02 03 04 05 06 07 08 09 26 27 28
29 30
31 32 运行结果如图4-11所示。 图4-11 线性渐变的背景 可以看出，页面中确实实现了背景的渐变，在jQuery Mobile中只要是可以使用背景的地方就可以使用渐变，如按钮、列表等。渐变的方式主要分为线性渐变和放射性渐变，本例中使用的渐变就是线性渐变。 由于各浏览器对渐变效果的支持程度不同，因此必须对不同的浏览器做出一些区分，如代码中第12~17行是针对WebKit内核浏览器而做的样式，而第18~23行则是针对Firefox的。 4.7 另一种对话框 第4.5节介绍了一种利用JavaScript实现的对话框，但是随着jQuery Mobile新版本的出现，又有一些原生的对话框效果可供选择。 【范例4-11 一种新的对话框】 01 02 03 04 05 06 07 08 09 10 11
12 请点击按钮 13
14

这是一个新的对话框

15
16
17 18 运行后单击页面上的“请点击按钮”按钮，出现的样式如图4-12所示。 图4-12 新的对话框 本范例非常短小，可是却并不简单，首先它提前使用了“按钮”这一页面元素，其次是对话框的使用需要设置一些特殊的属性。 代码第13行包含属性data-role="popup"，它将div标签以及其中的内容声明为一个对话框的样式，通过属性id="popupBasic"为它设置了ID。再看代码第12行href="#popupBasic"，指定了该按钮的作用是打开id为popupBasic的对话框。另外为了使按钮能够打开对话框，还要给按钮加入属性data-rel="popup"。 同样可以使用前面介绍过的data-transition来定义对话框弹出的样式。 4.8 对话框的高级属性 上一节介绍了一种新的对话框使用方法，但是显然这样简单的对话框只能作为一种提示符来使用，无法满足开发时的需求。为此笔者专门查阅了jQuery Mobile的说明文档，发现原来对话框也是有许多高级属性的，这些属性将在范例4-12中做出说明。 【范例4-12 对话框的高级属性】 01 02 03 04 05 对话框的高级属性 06 07 08 09 10 11 12
13
14

对话框的高技属性

15
16
17 右边关闭 18 左边关闭 19 禁用关闭 20 另一种右边关闭 21 另一种左边关闭 22 另一种禁用关闭 23
24 Close 25

点击右侧的叉叉可以关闭对话框

26
27
28 Close 29

点击左侧的叉叉可以关闭对话框

30
31
32 Close 33

点击屏幕的空白区域无法关闭

34
35
36
37

空白标题

38
39 Close 40

点击右侧的叉叉可以关闭对话框

41
42
43
44

空白标题

45
46 Close 47

点击左侧的叉叉可以关闭对话框

48
49
50
51

这是一个对话框的标题

52
53 Close 54

点击屏幕的空白区域无法关闭

55
56
57
58 59 运行结果如图4-13所示。 图4-13 对话框的高级属性 依次单击页面上的6个按钮会出现如图4-14~图4-19所示的界面。经过观察可以发现，新的对话框相比之前增加了一个关闭键和顶部的标题。在jQuery Mobile中非常容易实现这样的效果。在代码第24行有一句： Close 这实际上定义了一个按钮，关于实现按钮的方法将在后面进行讲解，本节只需要知道这行代码加入到对话框后，就可以作为对话框右上角的按钮来使用，如图4-14所示。当然也可以将属性calss=" ui-btn-right "改为calss=" ui-btn-left "，使按钮位置变为对话框的左上角。 再对比图4-15和图4-16，对话框似乎没有发生什么变化，可是从代码中可以看出它们确实不一样（第27行和第31行）。在第31行中多了一个属性data-dismissible="false"。重新打开图4-15对应的对话框，点击屏幕在对话框外的空白区域可以发现对话框消失了，而点击图4-16所示对话框外的空白区域却没有任何变化。也就是说，带有属性data-dismissible="false"，则不能依靠点击屏幕的空白区域来取消。 图4-14 对话框的关闭键在右侧 图4-15 对话框的关闭键在左侧 再看图4-17~图4-19，可以发现对话框中多了一个标题栏，这是36~38行代码的功劳，它使用了头部栏的一些样式，与按钮一样，这也是今后要讲解的内容，此处不再赘述。 图4-16 对话框无法靠点击空白区域关闭 图4-17 对话框的标题 图4-18 对话框的标题 图4-19 对话框的标题 4.9 基于jQuery Mobile的简单相册 前面介绍了jQuery Mobile中对话框的一些用法，但是在上一节中使用了太多没有介绍过的控件。为了弥补这一过错，笔者绞尽脑汁想到了一个既简单又能激发读者兴趣的例子：一个基于jQuery Mobile对话框实现的相册。 【范例4-13 基于jQuery Mobile对话框实现的简单相册】 01 02 03 04 05 06 07 08 09 10 11
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 34 38 42 46 50 54
55 56 其中p1.jpg~p6.jpg均是笔者在百度图片中找到的图片，可将它们下载到与该页面相同的文件夹中，运行后的效果如图4-20所示。 图4-20 相册界面 要注意图片名称一定得是p(n).jpg，其中（n）表示的是1~6中的某个数字。 单击页面中的某张图片，该图片将会以对话框的形式被放大显示，如图4-21所示。代码第12~14行展示了页面中一个图片的显示，它利用一对a标签将一个图片包裹在其中，这就使得其中的图片具有了按钮的某些功能，如在本例中就是靠单击图片来呼出对话框。 另外有心的读者也许已经注意到，在代码第12行出现了一个新的属性data-position-to="window"，它的作用是使弹出的对话框位于屏幕正中，而不再是位于呼出这个对话框的按钮附近。图4-22为取消该属性后的效果。 图4-21 对话框中的图片 图4-22 对话框不再位于页面的中央 4.10 总结 本章介绍的内容虽然非常简单，但却是利用jQuery Mobile开发复杂程序的基础，而本章介绍的对话框更是实现软件交互性必不可少的元素。通过本章的学习，读者一定也已经认识到，即使是最基本的控件，只要灵活地使用也一定能够实现比较复杂的功能。因此，希望读者在完成本章的学习后能够理论联系实际，对页面与对话框控件的功能多加琢磨。