extend jquery ui dialog (add more options)

泄露秘密 提交于 2019-11-27 22:40:04

问题


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
})

回答1:


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.




回答2:


Starting from jQuery UI 1.9 , you can extend widgets in a much nicer way without creating a new widget.

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

See - Redefining Widgets.

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

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


来源:https://stackoverflow.com/questions/10902099/extend-jquery-ui-dialog-add-more-options

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!