extend jquery ui dialog (add more options)

Question

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

Solution 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();

Comments

[Kevin B]

You would have to extend the jQuery UI dialog widget and override it's create method so that when a dialog is built, it looks at the additional options and includes or excludes the titlebar and/or close button. You could instead simply include your own custom css that hides them for all dialogs on your page, or, use the .find() and .css methods on the dialog when you create it to hide those pieces.

[Krishna Jonnalagadda]

Hi @romaninsh, i added your code in my project, on page load the popup was opening without pressing button, can i know why, shall i add my jquery extended file after jquery plugin?

[Krishna Jonnalagadda]

Hi @romaninsh, i added your code in my project, on page load the popup was opening without pressing button, can i know why, shall i add my jquery extended file after jquery plugin?