扩展jquery ui对话框（添加更多选项） [英] extend jquery ui dialog (add more options)

问题描述

如何为jQuery对话框创建和添加新的选项？
例如：我喜欢通过设置选项可以控制标题栏的显示或显示关闭按钮。

脚本将如下所示：

  $（＃message）对话框（{
 showTitle：false，// new option bar）
 showCloseButton：true // new option（show close button）
 modal：true ... //其他选项
}）
  / pre> 
 
解决方案
这比我在评论中表达的要容易一些。
  //存储旧方法以供以后使用
 var oldcr = $ .ui.dialog.prototype._create; 
 //添加两个默认值的新选项
 $ .ui.dialog.prototype.options.showTitlebar = true; 
 $ .ui.dialog.prototype.options.showClosebutton = true; 
 //覆盖原始_create方法
 $ .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（）; 
} 
}; 
 
 //这是你如何使用它
 $（< div />）对话框（{
 showClosebutton：false 
}）; 
 //或
 $（< div />）对话框（{
 showTitlebar：false 
}）; 
  
显然，如果标题栏被隐藏，关闭按钮也将被隐藏，因为它是titlebar。
 
how I can create and add new options for jQuery dialog?
for example: I like that through on the setting options can control the display of title bar or display the close button.

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

解决方案
It's a little easier than I expressed in my comment.
// 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
});
Obviously, if the titlebar is hidden, the close button will also be hidden since it is part of the titlebar.

                        
这篇关于扩展jquery ui对话框（添加更多选项）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！