开发者

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

开发者_JAVA技巧

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.


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.


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);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜