将自定义方法添加到UI对话框插件 [英] Add custom method to UI dialog plugin

问题描述

我正在使用jQuery的UI对话框，我想添加一个自定义方法.

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

基本上，当我的对话框具有工作"类时，该对话框中会包含一个加载叠加层.我正在尝试编写一些全局应用程序jQuery，以便当任何对话框关闭时，它都将删除正在工作"类.

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

如您所见，我不太确定如何调用对话框的cancelWorking方法，也不确定是否正确定义了该方法.

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

要简单地使用它:

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

这篇关于将自定义方法添加到UI对话框插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！