小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）

浏览数：21 / 时间：2015年06月11日

笔者当年还是一枚小白的时候，经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引，点开之后却发现网页中弹出了一个对话框，必须要不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享这样一个例子。

在Dreamweaver中编辑4个文件，分别为index.html、question.html、confirm.html、result,html。下面给出具体代码：

【范例4-5 游戏的开始页面index.html】

01    <!DOCTYPE>
02    <html xmlns="http://www.w3.org/1999/xhtml">
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-1.0.min.css" />
08    <script src="jquery-1.7.1.min.js"></script>
09    <script src="jquery.mobile-1.1.1.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>
02    <html xmlns="http://www.w3.org/1999/xhtml">
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-1.0.min.css" />
08    <script src="jquery-1.7.1.min.js"></script>
09    <script src="jquery.mobile-1.1.1.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>
02    <html xmlns="http://www.w3.org/1999/xhtml">
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-1.0.min.css" />
08    <script src="jquery-1.7.1.min.js"></script>
09    <script src="jquery.mobile-1.1.1.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>
02    <html xmlns="http://www.w3.org/1999/xhtml">
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-1.0.min.css" />
08    <script src="jquery-1.7.1.min.js"></script>
09    <script src="jquery.mobile-1.1.1.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>