私は自分のサイトで jQuery を使用しており、特定の div が表示されたときに特定のアクションをトリガーしたいと考えています。
何らかの「isvisible」イベント ハンドラーを任意の div にアタッチし、div が表示された際に特定のコードを実行することは可能ですか?
次のような疑似コードがほしいです:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
contentDiv が実際に表示されるまでは、alert("do something") コードは実行されません。
ありがとう。
ベストアンサー1
オリジナルに追加することもできます。見せる（）メソッドを使用すると、何かを表示するたびにイベントをトリガーする必要がなくなり、レガシー コードで動作させる必要もなくなります。
JQuery 拡張機能:
jQuery(function($) {
var _oldShow = $.fn.show;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function() {
var obj = $(this),
newCallback = function() {
if ($.isFunction(oldCallback)) {
oldCallback.apply(obj);
}
obj.trigger('afterShow');
};
// you can trigger a before show if you want
obj.trigger('beforeShow');
// now use the old function to show the element passing the new callback
_oldShow.apply(obj, [speed, newCallback]);
});
}
});
使用例:
jQuery(function($) {
$('#test')
.bind('beforeShow', function() {
alert('beforeShow');
})
.bind('afterShow', function() {
alert('afterShow');
})
.show(1000, function() {
alert('in show callback');
})
.show();
});
これにより、元の .show() メソッドの通常の動作を実行しながら、beforeShow と afterShow で何かを効果的に実行できるようになります。
元の .show() メソッドをオーバーライドしなくても済むように、別のメソッドを作成することもできます。