上QQ阅读APP看书，第一时间看更新
4.9 基于jQuery Mobile的简单相册
前面介绍了jQuery Mobile中对话框的一些用法，但是在上一节中使用了太多没有介绍过的控件。为了弥补这一过错，笔者绞尽脑汁想到了一个既简单又能激发读者兴趣的例子：一个基于jQuery Mobile对话框实现的相册。
【范例4-13 基于jQuery Mobile对话框实现的简单相册】
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 <link rel="stylesheet" href="jquery.mobile.min.css" />
07 <script src="jquery-2.1.4.min.js"></script>
08 <script src="jquery.mobile.min.js"></script>
09 </head>
10 <body>
11 <div data-role="page">
12 <a href="#popup_1" data-rel="popup" data-position-to="window">
13 <img src="p1.jpg" style="width:49%"><! --在标签a中加入img标签-->
14 </a>
15 <a href="#popup_2" data-rel="popup" data-position-to="window">
16 <img src="p2.jpg" style="width:49%">
17 </a>
18 <a href="#popup_3" data-rel="popup" data-position-to="window">
19 <img src="p3.jpg" style="width:49%">
20 </a>
21 <a href="#popup_4" data-rel="popup" data-position-to="window">
22 <img src="p4.jpg" style="width:49%">
23 </a>
24 <a href="#popup_5" data-rel="popup" data-position-to="window">
25 <img src="p5.jpg" style="width:49%">
26 </a>
27 <a href="#popup_6" data-rel="popup" data-position-to="window">
28 <img src="p6.jpg" style="width:49%">
29 </a>
30 <div data-role="popup" id="popup_1">
31 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
32 <img src="p1.jpg" style="max-height:512px; ">
33 </div>
34 <div data-role="popup" id="popup_2">
35 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
36 <img src="p2.jpg" style="max-height:512px; " alt="Sydney,
Australia">
37 </div>
38 <div data-role="popup" id="popup_3">
39 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
40 <img src="p3.jpg" style="max-height:512px; " alt="New York,
USA">
41 </div>
42 <div data-role="popup" id="popup_4">
43 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
44 <img src="p4.jpg" style="max-height:512px; ">
45 </div>
46 <div data-role="popup" id="popup_5">
47 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
48 <img src="p5.jpg" style="max-height:512px; " alt="Sydney,
Australia">
49 </div>
50 <div data-role="popup" id="popup_6">
51 <a href="#" data-rel="back" data-role="button" data-icon=
"delete" data-iconpos="notext" class="ui-btn-right">Close</a>
52 <img src="p6.jpg" style="max-height:512px; " alt="New York,
USA">
53 </div>
54 </div>
55 </body>
56 </html>
其中p1.jpg～p6.jpg均是笔者在百度图片中找到的图片，可将它们下载到与该页面相同的文件夹中，运行后的效果如图4-20所示。
图4-20 相册界面
提示
要注意图片名称一定得是p(n).jpg，其中（n）表示的是1～6中的某个数字。
单击页面中的某张图片，该图片将会以对话框的形式被放大显示，如图4-21所示。代码第12～14行展示了页面中一个图片的显示，它利用一对a标签将一个图片包裹在其中，这就使得其中的图片具有了按钮的某些功能，如在本例中就是靠单击图片来呼出对话框。
图4-21 对话框中的图片
另外有心的读者也许已经注意到，在代码第12行出现了一个新的属性data-position-to="window"，它的作用是使弹出的对话框位于屏幕正中，而不再是位于呼出这个对话框的按钮附近。图4-22为取消该属性后的效果。
图4-22 对话框不再位于页面的中央