Question

我无法在jQuery UI中掌握OOP，关于我习惯的经典OOP。

据我所知，我创建了一个名为'modal'的新插件（widget），它扩展了UI对话框小部件。现在我如何覆盖对话框的close()方法，还调用原始方法以便我不会失去其功能？

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

Answer 1

当你有一个可以挂钩的关闭事件时，为什么要用新的关闭函数覆盖$ .ui.dialog？查看以下链接中的“事件”选项卡：

http://jqueryui.com/demos/dialog/#modal

页面中的代码示例：

提供一个回调函数来处理close事件作为init选项。

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

按类型绑定到关闭事件：dialogclose。

$( ".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);

Answer 2

Here是我找到的一个例子。我发现它清晰而有用：

// If you dont need to call original method
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
  _updatePosition: function(){
    // Do what you want to
  }
}));

// If you need to call original method
var orig_updatePosition = $.ui.addresspicker.prototype._updatePosition;
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
  _updatePosition: function(){
    // Do what you want to
    // Call original widget method  
    orig_updatePosition.apply(this, arguments);
  }
}))

Answer 3

我不确定jQuery UI。真的不喜欢它。

但是你认为你可以做这样的事情。

$.widget('ui.modal', $.ui.dialog, {

    close: function() {

        $(this).addClass('test');

        $.ui.dialog.close.call(this, arguments);
        // Using method call to call the original close method from dialog
        // The sweet thing about call is you can pass this to it.
        // Sending any arguments you maybe get from the function initialize. close('argument 1', 'argument 2', etc...) 

    }
});

$.extend($.ui.modal);

安德烈亚斯

jQuery UI - 覆盖插件方法

3 个答案: