Implementing Inheritance for jQueryUI Dialog Boxes

First of all, nothing fancy here. Just want to show you a good way to implement Inheritance on jQueryUI Dialog Boxes. Here is one way to take advantage of Javascript’s Inheritance capability. We can use inheritance for jQuery UI dialog boxes – e.g. we have the parent ‘DialogBox’ which will have the basic properties like width, height, border colour, border thickness, close box, etc. Then all these basic properties of the parent ‘DialogBox’ will be inherited by its children classes like ‘MessageBox’, ‘LoginBox’, ‘EditBox’, and ‘UploadBox’. These children classes will have its own unique properties as well. Which will make the implementation look like this:

var dbox = new StatusMessageBox('message here..'); // this will initialize the message dialog box
dbox.render(); // this will render the message dialog box

Time to dissect the classes. Let’s start with the parent class ‘DialogBox’ – this is where all the basic and common properties will be set. Please refer to the code comments for more details:

var DialogBox = function(properties, attr) {
this.properties = properties;
this.attr = attr;
}
DialogBox.prototype.preRender = function() {
// do something before rendering the dialog box
}
DialogBox.prototype.postRender = function() {
// do something after the redering the dialog box
}
DialogBox.prototype.render = function(appendElt) {
//this.preRender(this.dialogContent);

var appendElt = (appendElt) ? appendElt : $('#container');
var self = this;

var defaultAttr = {
'class' : 'dialog_box'
};
var defaultProperties = {
'title' : 'Message',
'width' : '350',
'height' : 'auto',
'modal' : true,
'resizable' : true,
'buttons' : {
'OK' : function() {
$(this).dialog('close');
}
},
'open' : function() {
self.postRender();
},
'beforeClose' : function() {
//$(this).dialog('destroy');
}

};

// overwrite the default properties and attributes if necessary
$.extend(defaultProperties, this.properties);
$.extend(defaultAttr, this.attr);

// create the element
var dialog = $(document.createElement('div')).attr(defaultAttr);

this.dialogContent.appendTo(dialog);

// append the box to the parent element
dialog.appendTo(appendElt);

// apply the dialog box properties
dialog.dialog(defaultProperties);

 // make this accessible outside
this.dialogObj = dialog;
}

As you can see, the base class is setting up the possible common properties among dialog boxes. Let’s move on to the ‘StatusMessageBox’ class below. This type of dialog box will prompt for messages e.g. error or success messages. You can initialize its message property which will set the message to be prompted by the message box. ‘StatusMessageBox’ is also inheriting its basic properties from its parent: ‘DialogBox’.

/**
* Display simple status message
*
*/

var StatusMessageBox = function(msg) {
// create the dialog box content
var defaultMsg = (msg) ? msg : 'default message';
this.dialogContent = $(document.createElement('p')).html(defaultMsg);
}
/**
* inherit from DialogBox
*/

StatusMessageBox.prototype = new DialogBox();
StatusMessageBox.prototype.constructor = StatusMessageBox;

Concept is the same with the rest of DialogBox’s children like: ‘LoginBox’, ‘EditBox’, and ‘UploadBox’. Please take note that ‘UploadBox’ in the demo is dependent on uploadify and swfobject.

Suggestions and ideas for improvement will be greatly appreciated.

Time to play:

The class itself.
Live demo.

  1. I just want to say thank you.

Leave a Comment


× 1 = one


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>