4.8 对话框的高级属性
上一节介绍了一种新的对话框使用方法，但是显然这样简单的对话框只能作为一种提示符来使用，无法满足开发时的需求。为此笔者专门查阅了jQuery Mobile的说明文档，发现原来对话框也是有许多高级属性的，这些属性将在范例4-12中做出说明。
【范例4-12 对话框的高级属性】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>对话框的高级属性</title>
06 <meta name="viewport" content="width=device-width, initial-scale=1">
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 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="header">
14 <h1>对话框的高技属性</h1>
15 </div>
16 <div data-role="content">
17 <a href="#popupCloseRight" data-rel="popup"
data-role="button">右边关闭</a>
18 <a href="#popupCloseLeft" data-rel="popup"
data-role="button">左边关闭</a>
19 <a href="#popupUndismissible" data-rel="popup" data-role=
"button" >禁用关闭</a>
20 <a href="#popupCloseRight1" data-rel="popup" data-role=
"button">另一种右边关闭</a>
21 <a href="#popupCloseLeft1" data-rel="popup"
data-role="button">另一种左边关闭</a>
22 <a href="#popupUndismissible1" data-rel="popup" data-role=
"button" >另一种禁用关闭</a>
23 <div data-role="popup" id="popupCloseRight"
class="ui-content" style="max-width:280px">
24 <a href="#" data-rel="back" data-role="button"
data-theme=
"a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
25 <p>点击右侧的叉叉可以关闭对话框</p>
26 </div>
27 <div data-role="popup" id="popupCloseLeft" class="ui-content"
style="max-width:280px">
28 <a href="#" data-rel="back" data-role="button"
data-theme=
"a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
29 <p>点击左侧的叉叉可以关闭对话框</p>
30 </div>
31 <div data-role="popup" id="popupUndismissible" class=
"ui-content" style="max-width:280px" data-dismissible="false">
32 <a href="#" data-rel="back" data-role="button"
data-theme
="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
33 <p>点击屏幕的空白区域无法关闭</p>
34 </div>
35 <div data-role="popup" id="popupCloseRight1"
class="ui-content" style="max-width:280px">
36 <div data-role="header"data-theme="a"class="ui-corner-top">
37 <h1>空白标题</h1>
38 </div>
39 <a href="#" data-rel="back" data-role="button" data
-theme="a" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
40 <p>点击右侧的叉叉可以关闭对话框</p>
41 </div>
42 <div data-role="popup" id="popupCloseLeft1"
class="ui-content" style="max-width:280px">
43 <div data-role="header" data-theme="a"
class="ui-corner-top">
44 <h1>空白标题</h1>
45 </div>
46 <a href="#" data-rel="back" data-role="button"
data-theme
="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
47 <p>点击左侧的叉叉可以关闭对话框</p>
48 </div>
49 <div data-role="popup" id="popupUndismissible1" class=
"ui-content" style="max-width:280px" data-dismissible="false">
50 <div data-role="header" data-theme="a"
class="ui-corner-top">
51 <h1>这是一个对话框的标题</h1>
52 </div>
53 <a href="#" data-rel="back" data-role="button"
data-theme=
"a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
54 <p>点击屏幕的空白区域无法关闭</p>
55 </div>
56 </div>
57 </div>
58 </body>
59 </html>
运行结果如图4-13所示。
图4-13 对话框的高级属性
依次单击页面上的6个按钮会出现如图4-14～图4-19所示的界面。经过观察可以发现，新的对话框相比之前增加了一个关闭键和顶部的标题。在jQuery Mobile中非常容易实现这样的效果。在代码第24行有一句：
图4-14 对话框的关闭键在右侧
图4-15 对话框的关闭键在左侧
图4-16 对话框无法靠点击空白区域关闭
图4-17 对话框的标题
图4-18 对话框的标题
图4-19 对话框的标题
<a href="#" data-rel="back" data-role="button" data-theme="a"
data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
这实际上定义了一个按钮，关于实现按钮的方法将在后面进行讲解，本节只需要知道这行代码加入到对话框后，就可以作为对话框右上角的按钮来使用，如图4-14所示。当然也可以将属性calss=" ui-btn-right "改为calss=" ui-btn-left "，使按钮位置变为对话框的左上角。
再对比图4-15和图4-16，对话框似乎没有发生什么变化，可是从代码中可以看出它们确实不一样（第27行和第31行）。在第31行中多了一个属性data-dismissible="false"。重新打开图4-15对应的对话框，点击屏幕在对话框外的空白区域可以发现对话框消失了，而点击图4-16所示对话框外的空白区域却没有任何变化。也就是说，带有属性data-dismissible="false"，则不能依靠点击屏幕的空白区域来取消。
再看图4-17～图4-19，可以发现对话框中多了一个标题栏，这是36～38行代码的功劳，它使用了头部栏的一些样式，与按钮一样，这也是今后要讲解的内容，此处不再赘述。