将自定义方法添加到UI对话框插件

我正在使用jQuery的UI对话框，并且想要添加自定义方法。将自定义方法添加到UI对话框插件

基本上，当我的对话框有一个'工作'类，它有一个加载覆盖。我正在尝试编写一些全局应用程序jQuery，以便在任何对话框关闭时删除类'working'。

我真的不知道我在做什么，但是这是我到目前为止有：

(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方法，我不确定我是否已经正确定义了该方法。

来源

2011-08-30 BadHorsie

你可以尝试使你自己的插件继承自对话框并用你自己的方法加载它。 '.widget（'ui.myDialog'，'ui.dialog'，{...}）;' – jyore

抱歉，上面的'ui.dialog''字符串应该是实际的窗口小部件'$ .ui.dialog'。例如见下面的帖子。 – jyore

正如我的评论所述，您可以从插件继承并扩展其方法。

(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

该模式允许你添加额外的输入选项，方法，事件，等，以及过载或延伸在父插件提供的功能。

还应该提一下，这很好，因为您仍然可以使用常规插件，而无需在UI中的其他位置进行修改。

来源

2011-08-30 19:03:47 jyore

那么，是否没有简单的方法来添加一个自定义的方法到一个插件，而没有制作一个完整的继承自定义插件？ – BadHorsie

我会做一点研究，并试图找出...这是我亲自做到这一点的方式。我不认为改变插件的一般形式是最好的。对我来说，这和编辑源代码几乎是一样的，你也欢迎你做。如果我找到别的东西，我会编辑我的帖子。 – jyore

@BadHorsie，我没有找到另一种方式来完成它没有完全破坏对话框名称空间，这是不好的...是否有一个原因，你会反对与自定义方法的继承插件？你提到了一个简单的方法，但扩展如何不简单...你可以拿我的代码示例，并添加你的方法，你很好去..当你完成了大概20行代码或更少。另外，您可以在函数内使用“this”属性，它可以直接访问所有选项，方法，事件和实际元素。 – jyore

我想做同样的事情，但对接受的答案并不满意。我看着有点进一步调查，并发现可以新方法这样：

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

然后你就可以调用它，你会打电话给任何其他jQuery UI的方法：

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

来源

2012-09-28 15:09:35 Langdon

jyore的答案是首选的方式，但我需要这个办法。我有很多遗留代码依赖于使用正常的自动完成。首选的方法是将所有引用从'autocomplete'更改为'myAutocomplete'。或者我不得不改变源代码，但这使得更新jQuery UI更加困难。这就是为什么这条路线在某些情况下有意义。 – Peter

将自定义方法添加到UI对话框插件

回答

相关问题