- 構建跨平臺APP：jQuery Mobile移動應用實戰（第2版） （跨平臺移動開發叢書）
- 李柯泉
- 978字
- 2020-11-28 23:45:48
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放在同一個頁面中，這種方法將會在后面的章節進行介紹。