Jquery 如何扩展Twitter引导插件
我正在深入研究Twitter的引导功能,现在想尝试向插件添加一些功能,但我不知道如何做到这一点。以modal插件为例(),我想向插件添加一个新函数,可以像调用标准插件方法一样调用该函数。我认为最接近的是下面的代码,但是当我尝试访问时,我得到的只是函数不是对象的一部分 有什么建议吗?这是我尝试过的最接近我需要做的事情:Jquery 如何扩展Twitter引导插件,jquery,jquery-plugins,twitter-bootstrap,Jquery,Jquery Plugins,Twitter Bootstrap,我正在深入研究Twitter的引导功能,现在想尝试向插件添加一些功能,但我不知道如何做到这一点。以modal插件为例(),我想向插件添加一个新函数,可以像调用标准插件方法一样调用该函数。我认为最接近的是下面的代码,但是当我尝试访问时,我得到的只是函数不是对象的一部分 有什么建议吗?这是我尝试过的最接近我需要做的事情: $.extend($.fn.modal, { showFooterMessage: function (message) { alert("Hey")
$.extend($.fn.modal, {
showFooterMessage: function (message) {
alert("Hey");
}
});
那么我想这样称呼它:
$(this).closest(".modal").modal("showFooterMessage");
编辑:好的,我知道怎么做了:
(function ($) {
var extensionMethods = {
displayFooterMessage: function ($msg) {
var args = arguments[0]
var that = this;
// do stuff here
}
}
$.extend(true, $.fn.modal.Constructor.prototype, extensionMethods);
})(jQuery);
现有的引导插件集的问题在于,如果有人想要扩展它们,那么没有一个新方法可以接受参数。我试图“修复”这一问题,是为了在插件函数调用中添加对参数的接受
$.fn.modal = function (option) {
var args = arguments[1] || {};
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = typeof option == 'object' && option
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](args)
else data.show()
}) // end each
} // end $.fn.modal
作为参考,我有一个类似的问题,所以我通过分叉和添加插件脚本本身所需的功能来解决
如果您必须更改源代码,那么它实际上并不是一个扩展,因此我认为将所有修改放在一个位置更容易。这是一个旧线程,但我只是使用以下模式对modal进行了一些自定义扩展:
// save the original function object
var _super = $.fn.modal;
// add custom defaults
$.extend( _super.defaults, {
foo: 'bar',
john: 'doe'
});
// create a new constructor
var Modal = function(element, options) {
// do custom constructor stuff here
// call the original constructor
_super.Constructor.apply( this, arguments );
}
// extend prototypes and add a super function
Modal.prototype = $.extend({}, _super.Constructor.prototype, {
constructor: Modal,
_super: function() {
var args = $.makeArray(arguments);
_super.Constructor.prototype[args.shift()].apply(this, args);
},
show: function() {
// do custom method stuff
// call the original method
this._super('show');
}
});
// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {
var args = $.makeArray(arguments),
option = args.shift();
return this.each(function() {
var $this = $(this);
var data = $this.data('modal'),
options = $.extend({}, _super.defaults, $this.data(), typeof option == 'object' && option);
if ( !data ) {
$this.data('modal', (data = new Modal(this, options)));
}
if (typeof option == 'string') {
data[option].apply( data, args );
}
else if ( options.show ) {
data.show.apply( data, args );
}
});
}, $.fn.modal);
这样你就可以
1) 添加您自己的默认选项
2) 使用自定义参数创建新方法并访问原始(超级)函数
3) 在调用原始构造函数之前和/或之后在构造函数中执行操作对于记录,有一种简单的方法可以覆盖或扩展现有函数:
var _show = $.fn.modal.Constructor.prototype.show;
$.fn.modal.Constructor.prototype.show = function() {
_show.apply(this, arguments);
//Do custom stuff here
};
不包含自定义参数,但使用上述方法也很容易;不要使用
apply
和arguments
,而是在函数定义中指定原始参数加上自定义参数,然后用原始参数调用原始\u show
(或其他任何参数),最后用新参数执行其他操作。适用于希望使用Bootstrap 3执行此操作的任何人。插件布局有所改变,所有Bootstrap 3插件的默认选项都附加到插件构造函数:
var _super = $.fn.modal;
$.extend(_super.Constructor.DEFAULTS, {
foo: 'bar',
john: 'doe'
});
+1以获取David的上述公认答案。但是如果我可以简化一点,我会调整
默认值
扩展和$fn.modal
扩展如下:
!function($) {
'use strict';
// save the original function object
var _super = $.fn.modal;
// create a new constructor
var Modal = function(element, options) {
// do custom constructor stuff here
// call the original constructor
_super.Constructor.apply( this, arguments );
}
// add custom defaults
Modal.DEFAULTS = $.extend( _super.defaults, {
myCustomOption: true
});
// extend prototypes and add a super function
Modal.prototype = $.extend({}, _super.Constructor.prototype, {
constructor: Modal,
_super: function() {
var args = $.makeArray(arguments);
_super.Constructor.prototype[args.shift()].apply(this, args);
},
show: function() {
// do custom method stuff
// call the original method
this._super('show');
},
myCustomMethod: function() {
alert('new feature!');
}
});
// Copied exactly from Bootstrap 3 (as of Modal.VERSION = '3.3.5')
// Notice: You can copy & paste it exactly, no differences!
function Plugin(option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
// override the old initialization with the new constructor
$.fn.modal = $.extend(Plugin, $.fn.modal);
}(jQuery);
如果此编辑是要作为答案,您现在应该可以将其作为答案发布。请继续这样做:)回答我自己的问题似乎有点站不住脚;)哦,别担心。这是完全正常的-甚至:)不知何故,其他方法每次都会运行到一个无限循环中。。这个很好用+1为简单起见:)这很好,但如果您想扩展构造函数(在构造上做一些事情,例如添加绑定等),则不太好。@DavidGraham您也可以重写构造函数,它就在原型中。在上面的示例中,您希望覆盖
$.fn.modal.Constructor.prototype.Constructor
方法。正如@benembery所建议的,默认选项附加到构造函数命名空间。对于这个解决方案,我认为自定义默认值需要是//添加自定义默认值Modal.defaults=$.extend(_super.Constructor.defaults,{myCustomOption:true})代码>David-如果您能看看我关于您使用的覆盖初始化语法的问题,我将不胜感激:您是否有类似的Bootstrap4解决方案?