[英]Extend jQuery Plugin with additional function / override function
我需要擴展一個 jQuery 插件 ( https://github.com/idiot/unslider ),以便使用另一個公共方法添加額外的行為。
(function(){
// Store a reference to the original remove method.
var originalMethod = $.fn.unslider;
// Define overriding method.
$.fn.unslider = function(){
// Execute the original method.
originalMethod.apply( this, arguments );
console.log( "Override method" );
function test() {
console.log("test called");
}
this.each(function() {
// Operations for each DOM element
console.log("each dom element?");
}).data('unslider', {
// Make test accessible from data instance
test: test
});
return this;
}
})(jQuery);
我已經設法在調用時使公共方法可訪問
var slider = $('#slider');
slider.data('unslider').test();
但是,無論如何,我想保留 unslider 的舊行為,但使用另一個功能擴展插件。 有沒有人有想法?
我創建了一個小提琴,所以你可以檢查發生了什么:我的新函數被調用,但舊函數消失了: http : //jsfiddle.net/b2os4s7e/1/
如果查看 unslider 的來源,可以看到它在數據中存儲了 Unslider 實例:
// Enable multiple-slider support
return this.each(function(index) {
// Cache a copy of $(this), so it
var me = $(this),
key = 'unslider' + (len > 1 ? '-' + ++index : ''),
instance = (new Unslider).init(me, o);
// Invoke an Unslider instance
me.data(key, instance).data('key', key);
});
在您的代碼中,您正在用您自己的對象覆蓋此對象。 但是,滑塊期望有一個 Unslider 實例。 所以你想要做的是獲取這個實例,然后用你自己的函數擴展它:
var key = $(this).data('key');
var obj = $(this).data(key);
obj.test = function() { console.log('Working!'); };
只需定義:
$fn.unslider2 = function() { ... }
用你喜歡的任何名字和行為。
對於擴展 JQuery 應該使用.fn.extend
(function($){
$.fn.extend({
helloworld: function(message){
return this.each(function(){
$(this).click(function(){
alert(message);
});
});
}
});
})(jQuery)
對象.fn.extend
用於擴展 jQuery 的功能
感謝您的回答! 我是這樣做的:
(function($){
var originalMethod = $.fn.unslider;
$.fn.extend({
unslider: function(o) {
var len = this.length;
var applyMethod = originalMethod.apply( this, arguments );
var key = applyMethod.data('key');
var instance = applyMethod.data(key);
// Cache a copy of $(this), so it
var me = $(this);
if (instance) {
instance.movenext = function (callback) {
return instance.stop().to(instance.i + 1, callback);
};
instance.moveprev = function (callback) {
return instance.stop().to(instance.i - 1, callback);
};
}
return applyMethod.data(key, instance);
}
});
})(jQuery)
關鍵是按照 sroes 的建議解決數據屬性。
此外,我需要應用原始方法,因為我需要舊方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.