4.8　对话框的高级属性

上一节介绍了一种新的对话框使用方法，但是显然这样简单的对话框只能作为一种提示符来使用，无法满足开发时的需求。为此笔者专门查阅了jQuery Mobile的说明文档，发现原来对话框也是有许多高级属性的，这些属性将在范例4-12中做出说明。

【范例4-12　对话框的高级属性】

运行结果如图4-13所示。

图4-13　对话框的高级属性

依次单击页面上的6个按钮会出现如图4-14~图4-19所示的界面。经过观察可以发现，新的对话框相比之前增加了一个关闭键和顶部的标题。在jQuery Mobile中非常容易实现这样的效果。在代码第24行有一句：

    <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-14　对话框的关闭键在右侧

图4-15　对话框的关闭键在左侧

再看图4-17~图4-19，可以发现对话框中多了一个标题栏，这是36~38行代码的功劳，它使用了头部栏的一些样式，与按钮一样，这也是今后要讲解的内容，此处不再赘述。

图4-16　对话框无法靠点击空白区域关闭

图4-17　对话框的标题

图4-18　对话框的标题

图4-19　对话框的标题