4.9　基于jQuery Mobile的简单相册

前面介绍了jQuery Mobile中对话框的一些用法，但是在上一节中使用了太多没有介绍过的控件。为了弥补这一过错，笔者绞尽脑汁想到了一个既简单又能激发读者兴趣的例子：一个基于jQuery Mobile对话框实现的相册。

【范例4-13　基于jQuery Mobile对话框实现的简单相册】

其中p1.jpg~p6.jpg均是笔者在百度图片中找到的图片，可将它们下载到与该页面相同的文件夹中，运行后的效果如图4-20所示。

单击页面中的某张图片，该图片将会以对话框的形式被放大显示，如图4-21所示。代码第12~14行展示了页面中一个图片的显示，它利用一对a标签将一个图片包裹在其中，这就使得其中的图片具有了按钮的某些功能，如在本例中就是靠单击图片来弹出对话框的。

图4-20　相册界面

另外，有心的读者也许已经注意到，在代码第12行出现了一个新的属性data-position-to="window"，它的作用是使弹出的对话框位于屏幕正中，而不再是位于呼出这个对话框的按钮附近。图4-22所示为取消该属性后的效果。

图4-21　对话框中的图片

图4-22　对话框不再位于页面的中央