I am having trouble getting to grips with OOP in jQuery UI, with regards to classic OOP that I'm used to.
As far as I can tell, I have created a new plugin (widget) called 'modal' that extends the UI dialog widget. Now how do I override dialog's close()
method, but also call the original method so that I don't lose its functionality?
$.widget('ui.modal', $.ui.dialog, {
close: function() {
// How do I do something to the current modal DOM object?
// Is this correct?
$(this).addClass('test');
// Then call the parent close() method to keep all original
// functionality of dialog.close()
// ???
}
});
$.extend($.ui.modal);
Why would you want to override $.ui.dialog with a new close function when it has a close event that you can hook into? Check out the events tab in the following link:
http://jqueryui.com/demos/dialog/#modal
Code examples from the page:
Supply a callback function to handle the close event as an init option.
$( ".selector" ).dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
...
});
EDIT
To answer the question:
(function($){
var dialogExtensions ={
oldClose: $.ui.dialog.prototype.close,
close: function(event){
this.oldClose(event);
// custom code
}
};
$.extend($.ui.dialog.prototype, dialogExtensions);
})(jQuery);
Here is an example I found. I find it clear and useful :
// If you dont need to call original method
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
_updatePosition: function(){
// Do what you want to
}
}));
// If you need to call original method
var orig_updatePosition = $.ui.addresspicker.prototype._updatePosition;
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
_updatePosition: function(){
// Do what you want to
// Call original widget method
orig_updatePosition.apply(this, arguments);
}
}))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With