CODEWITHSUNDEEP
jqueryjquery-ui
BadHorsie
BadHorsie

Reputation: 14544

Add custom method to UI dialog plugin

I am using jQuery's UI dialogs and I want to add a custom method.

Basically when my dialog has a class of 'working', it has a loading overlay in it. I am trying to write some global application jQuery so that when any dialog closes, it removes the class 'working'.

I'm not really sure what I'm doing but this is what I have so far:

(function ($) {

    // BIND TO DIALOG CLOSE EVENT
    $('.ui-dialog').live('dialogclose', function() {
        $(this).dialog('cancelWorking');
    });

    // CUSTOM METHOD
    $.fn.dialog.cancelWorking = function() {
        $(this).removeClass('working');
    };

}(jQuery));

As you can see I'm not really sure how to call the cancelWorking method of a dialog, and I'm not sure if I've even defined the method properly.

Upvotes: 4

Views: 5110

Answers (2)

Langdon
Langdon

Reputation: 20063

I wanted to do the same thing, but wasn't satisfied with the accepted answer. I looked a little further into it and found that you can new methods as such:

$.ui.dialog.prototype.toggleProcessing = function(enable) {
    alert(((enable) ? 'en' : 'dis') + 'able processing');
}

And then you can call it as you'd call any other jQuery UI method:

$('#myDialog').dialog('toggleProcessing', true);
$('#myDialog').dialog('toggleProcessing', false);

Upvotes: 4

jyore
jyore

Reputation: 4825

As mentioned in my comment, you can inherit from a plugin and extend its methods. 

(function($,undefined) {

    $.widget('ui.mydialog', $.ui.dialog,{
        test : function() { alert('works') },
    });

    $.extend($.ui.mydialog,{version:'v0.1'});
 })(jQuery);

To use it simply:

$('.selector').mydialog({modal:true}); //Create (same as a dialog)

$('.selector').mydialog('test');  //Call extended method

This pattern allows you to add additional input options, methods, events, etc. as well as overload or extend the functions supplied in the parent plugin.

Should also mention that this is nice because you can still use the regular plugin without modifications elsewhere in your UI.

Upvotes: 6

Related Questions