- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 978字
- 2024-10-30 00:11:26
4.4 整人游戏：我不是弱智！
笔者以前经常被QQ控件或各种论坛上的某个标题所吸引，打开之后却发现网页中弹出一个对话框，必须不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程，可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享下面的例子。
在Sublime中编辑4个文件，分别为index.html、question.html、confirm.html、result.html。下面给出具体代码。
【范例4-5 游戏的开始页面index.html】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <title>游戏开始</title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 </head>
12 <body>
13 <div data-role="page">
14 <a href="question.html" data-role="button" data-rel="dialog">开始游戏
</a>
15 </div>
16 </body>
17 </html>
【范例4-6 询问读者是否是弱智的页面question.html】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <title>老实交代！你到底是不是弱智！</title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 </head>
12 <body>
13 <div data-role="page">
14 <h1>老实交代！你到底是不是弱智！</h1>
15 <a href="result.html" data-role="button">这你都知道！! ! ! </a>
//跳至最终页面
16 <a href="confirm.html" data-role="button" data-rel="dialog">死不承
认！</a> //继续循环
17 </div>
18 </body>
19 </html>
【范例4-7 另一个询问页面confirm.html】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <title>老实交代！你到底是不是弱智！</title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 </head>
12 <body>
13 <div data-role="page">
14 <h1>老实交代！你到底是不是弱智！</h1>
15 <a href="result.html" data-role="button">我承认，我是</a>//跳至最终
页面
16 <a href="question.html" data-role="button" data-rel="dialog">我不
是！</a> //继续循环
17 </div>
18 </body>
19 </html>
【范例4-8 游戏结束页面result.html】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <title>你这个弱智</title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 </head>
12 <body>
13 <div data-role="page">
14 <h1>早点承认不就好了么，何必这么麻烦！</h1>
15 </div>
16 </body>
17 </html>
运行后的结果如图4-6～图4-9所示。
图4-6 游戏开始图
4-7 对话框提问用户
图4-8 反复提问
图4-9 最后结果
首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示的页面，游戏结束，否则一直循环。
各位聪明而又细心的读者想必已经发现，本节使用的链接代码中又加入了一个新的属性data-rel="dialog"。这句代码是干什么用的呢？看上去并没有产生特殊效果。
首先dialog就是jQuery Mobile已经给用户定义好了对话框控件，使用它可以实现一些与一般页面不同的交互效果，读者可以自己尝试。当运行到图4-9所示的游戏结束页面时，点击手机上的返回键，会发现页面返回到了图4-6所示的界面。然后去掉data-rel="dialog"，再看效果会发现，点击返回键后会完整地重复图4-7以及图4-8所示的界面。
读者可以想象，这跟我们在PC上浏览网页时的返回按钮非常相似，由于浏览器会使用哈希来记录已经访问过的页面，从而使其在返回时能够记录已经访问过的页面。而对于以对话框形式打开的页面，则不记录其哈希值，浏览器将不会对这些页面进行记录。
当然，有一部分人会通过“返回”的方式来重复答题以获得虚假的高分。那么，如果在这里使用对话框控件就能比较容易地解决这一难题。
提示
为了加快页面的加载速度，可以尝试将多个page放在同一个页面中，这种方法将会在后面的章节进行介绍。