jQuery で遊んでみる

jQuery Event Delay

コード

(function($){
	$.fn.eventDelay = function(delay, triger, cancel, callback) {
		return this.each(function() {
			var target = $(this);
			var tid;
			target.bind(triger, function(){
				tid = setTimeout(callback, delay * 1000)
			})
			target.bind(cancel, function(){
				clearTimeout(tid)
			})
		});
	}
})(jQuery)

使用例

マウスオーバーイベント

この要素に2秒間マウスオーバーし続けるとアラート 
$('#hoge').eventDelay(2, 'mouseover', 'mouseout', function(){
	alert('hoge')
})

キー入力イベント

最後のキーイベントから 1 秒後入力内容を表示

注意: 1 秒以内に次のキー入力がないと表示されるという意味です

ここに表示: 

$('#ipt').eventDelay(1, 'keyup', 'keydown', function() {
	$('#copy').html($('#ipt').val());
});

jQuery PreInput

コード

(function($) {

$.fn.preInput = function(txt, options) {
	var default_options = {
		class_name: 'pre-input'
	};

	options = $.extend(default_options, options || {});
	return this.each(function(){
		if(typeof this.value == 'undefined') return;

		var elm = $(this);
		elm.val(txt)
		elm.addClass(options.class_name)
		elm.focus(function(){
			if(elm.val() == txt) {
				elm.removeClass(options.class_name)
				elm.val('');
			}
		});
		elm.blur(function(){
			if(elm.val() == '') {
				elm.addClass(options.class_name)
				elm.val(txt)
			}
		});
	});
}

})(jQuery);

input にあらかじめある値を入力しておいてフォーカスされるとその値が消える

空の状態でフォーカスを外すと初期値が再び入力される

使用例

$('#q').preInput('ここに入力してね')

jQuery zebra

(function($) {

$.fn.zebra = function(options){
	var default_options = {
		class_name: 'zebra',
		interval: 2
	}
	options = $.extend(default_options, options || {})

	return this.each(function(i){
		if((i + 1) % options.interval == 0)
			$(this).addClass(options.class_name)
	})
}

})(jQuery);

使用例

$('#zebra-ul li').zebra({interval: 3});
名前 URL
Blog http://d.hatena.ne.jp/higeorange/
OperaIRC+ http://opera.higeorange.com/
higeorange.com http://higeorange.com/
Twitter http://twitter.com/higeorange 
$('#zebra-table tbody tr').zebra();

jQuery observe value

input, textarea を指定した間隔ごとに監視してその度にある関数を実行する

(function($) {

$.fn.observeValue = function(callback, options) {
	var default_options = {
		interval: 1000
	};
	options = $.extend(default_options, options || {});

	return this.each(function(){
		if(typeof this.value == 'undefined') return;
		var tid;
		var self = this
		var elm = $(self)

		elm.focus(function(){
			tid = setInterval(function(){
				callback.call(self, elm.val())
			}, options.interval);
		});
		elm.blur(function(){
			clearInterval(tid);
		});
	})
}

})(jQuery);

使用例

$('#ov').observeValue(function(value) { $('#outov').html(value) });