扩展jQuery UI对话框（增加更多选项）

Question

如何创建并添加新选项到jQuery对话框？例如：我希望通过设置选项来控制标题栏的显示或者显示关闭按钮。

脚本应该像这样：

$("#message").dialog({
  showTitle:false,     //new option (hide Title bar)
  showCloseButton:true //new option (show close button)
  modal:true...        //other options
})

- tony007

---

你需要扩展jQuery UI对话框小部件并覆盖其create方法，以便在构建对话框时查看附加选项并包含或排除标题栏和/或关闭按钮。你也可以简单地包含自己的自定义CSS来隐藏页面上所有对话框的这些元素，或者在创建对话框时使用.find()和.css方法来隐藏它们。 - Kevin B

Answer 1

从jQuery UI 1.9开始，您可以在不创建新小部件的情况下以更加优美的方式扩展小部件。

请参阅 - 重新定义小部件。 http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});

$( "<div>" ).dialog();

- romaninsh

---

嗨@romaninsh，我在我的项目中添加了你的代码，在页面加载时弹出窗口而不需要按按钮，我可以知道为什么吗？我应该在jQuery插件之后添加我的jQuery扩展文件吗？ - jvk

嗨@romaninsh，我在我的项目中添加了你的代码，在页面加载时弹出窗口而不需要按按钮，我可以知道为什么吗？我应该在jQuery插件之后添加我的jQuery扩展文件吗？ - jvk

Answer 2

在我的评论中表达的比实际情况要简单一些。

// store old method for later use
var oldcr = $.ui.dialog.prototype._create;
// add the two new options with default values
$.ui.dialog.prototype.options.showTitlebar = true;
$.ui.dialog.prototype.options.showClosebutton = true;
// override the original _create method
$.ui.dialog.prototype._create = function(){
    oldcr.apply(this,arguments);
    if (!this.options.showTitlebar) {
       this.uiDialogTitlebar.hide();
    }
    else if (!this.options.showClosebutton) {
       this.uiDialogTitlebar.find(".ui-dialog-titlebar-close").hide();
    }
};

// this is how you use it
$("<div />").dialog({
    showClosebutton: false
});
// or
$("<div />").dialog({
    showTitlebar: false
});

显然，如果标题栏被隐藏了，关闭按钮也会被隐藏，因为它是标题栏的一部分。

- Kevin B