jquerydialogjquery-ui-dialog

extend jquery ui dialog (add more options)


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

Solution

  • 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.