我尝试重写 JQuery 的 .show 和 .hide 方法,以在使用以下代码调用它们之前和之后启动触发事件。
$(document).ready(function () {
$('#dataBox').bind('afterShow', function () {
alert('afterShow');
});
$('#dataBox').bind('afterHide', function () {
alert('afterHide');
});
$('#dataBox').bind('beforeShow', function () {
alert('beforeShow');
});
$('#dataBox').bind('beforeHide', function () {
alert('beforeHide');
});
$('#toggleButton').click(function(){
if($('#dataBox').is(':visible')) {
$('#dataBox').hide ();
} else {
$('#dataBox').show();
}
});
});
jQuery(function ($) {
var _oldShow = $.fn.show;
//Override jquery's 'show()' method to include two triggered events before and after
$.fn.show = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this),
newCallback = function () {
if ($.isFunction(oldCallback)) {
oldCallback.apply(obj);
}
obj.trigger('afterShow');
};
obj.trigger('beforeShow');
_oldShow.apply(obj, [speed, newCallback]);
});
}
});
jQuery(function ($) {
var _oldHide = $.fn.hide;
//Override jquery's 'hide()' method to include two triggered events before and after
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this),
newCallback = function () {
if ($.isFunction(oldCallback)) {
oldCallback.apply(obj);
}
obj.trigger('afterHide');
};
obj.trigger('beforeHide');
_oldHide.apply(obj, [speed, newCallback]);
});
}
});
我有以下标记:
<input type='text' id='dataBox'/>
<input type='button' value='toggle' id='toggleButton' />
当我单击切换按钮时,“beforeHide”和“beforeShow”事件将触发,而“afterShow”和“afterHide”则不会。谁能告诉我我做错了什么?
最佳答案
请检查demo fiddle 。希望它有效
$.show/$.hide - 覆盖函数:
(function($){
$.override ={'show': $.fn.show, 'hide': $.fn.hide};
$.each($.override,function(M,F){
var m=M.replace( /^\w/, function(r){ return r.toUpperCase(); });
$.fn[M] = function(speed, easing, callback) {
var args=[speed||0,easing||'',callback||function(){}];
if( $.isFunction(speed)){
args[2]=speed;
args[0]=0;
}
else if( $.isFunction(easing)){
args[2]=easing;
args[1]='';
}
if(!this.selector){
F.apply(this, arguments);
return this;
}
return this.each(function () {
var obj = $(this),
oldCallback = args[args.length-1],
newCallback = function () {
if ($.isFunction(oldCallback)){
oldCallback.apply(obj);
}
obj.trigger('after'+m);
};
obj.trigger('before'+m);
args[args.length-1]=newCallback;
//alert(args);
F.apply(obj,args);
});
}
});
})(jQuery);
用法
jQuery(function($){
var $dataBox=$('#dataBox').bind('beforeHide afterHide beforeShow afterShow', function(e) {
alert(e.type);
});
$('#toggleButton').bind('click',function(){
$dataBox[$dataBox.is(':visible')?'hide':'show'](100,'swing',function(){ alert('end of animation');});
return false;
});
});
关于jquery - 如何重写 JQuery 的 .show() 和 .hide() 以触发前后事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10702202/