当前位置:嗨网首页>书籍在线阅读

12-隐藏关闭按钮

  
选择背景色: 黄橙 洋红 淡粉 水蓝 草绿 白色 选择字体: 宋体 黑体 微软雅黑 楷体 选择字体大小: 恢复默认

4.5.4 隐藏关闭按钮

可以移除(隐藏)关闭按钮来阻止关闭对话框。

关闭按钮是一个和 ui-dialog-titlebar-close CSS类关联的 <a> 链接。在由调用 dialog (options) 方法产生的HTML中很容易找到这个链接(比如,用Firebug)。它位于对话框内容元素前面的兄弟元素中(如粗体部分所示):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
    href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
 <p> Content of the dialog box</p>
</div>
<script>
$("div#dialog").dialog ().prev ().find (".ui-dialog-titlebar-close").hide ();
</script>

这条语句包括以下步骤:

1.调用 dialog () 方法转成HTML对话框;

2.用 prev () 方法得到对话框内容元素之前的兄弟元素;

3.在通过如上关系,查找有 ui-dialog-titlebar-close CSS类的元素;

4.用 hide () 方法隐藏这个元素。

这必须按列出的顺序执行完成。比如,如果我们不先调用 dialog () 方法,则在用 prev () 方法得到的前面元素中会找不到关闭按钮链接,因为HTML还没转变成对话框呢!

如图4-8所示,关闭按钮是不可见的。

29.png

图4-8 没有关闭按钮的对话框