jQuery UI-覆盖插件方法 [英] jQuery UI - Override plugin method

问题描述

关于我惯用的经典OOP，我在jQuery UI中难以掌握OOP.

I am having trouble getting to grips with OOP in jQuery UI, with regards to classic OOP that I'm used to.

据我所知，我创建了一个名为"modal"的新插件(小部件)，该插件扩展了UI对话框小部件.现在如何覆盖对话框的close()方法，又如何调用原始方法，以免失去其功能?

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

推荐答案

当您有一个可以挂入的close事件时，为什么要用新的close函数覆盖$ .ui.dialog?在以下链接中查看事件标签:

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

页面中的代码示例:

提供一个回调函数以将close事件作为init选项进行处理.

$( ".selector" ).dialog({
   close: function(event, ui) { ... }
});

按以下类型绑定到关闭事件:对话框关闭.

$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});

编辑

要回答这个问题:

(function($){
    var dialogExtensions ={
        oldClose: $.ui.dialog.prototype.close,
        close: function(event){
            this.oldClose(event);
            // custom code
        } 
    };
    $.extend($.ui.dialog.prototype, dialogExtensions);
})(jQuery);

这篇关于jQuery UI-覆盖插件方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！