study:javascript:jquery:plugin:monitor

[ Please fill this placeholder (:wiki:site_notice) ]

現在位置: start » study » javascript » jquery » plugin » monitor

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== jQuery plugin for monitoring idle state ======
前に、dojoで**[[study:javascript:dojo:monitor|idle state]]**を監視するクラスを作成してみたが、今回は同じソースをjQuery pluginで作成してみた。\\
plugin化するにあたって、optionの設定ができることと、activeステートとidleステートの際のcallbackメソッドを\\
overrideできるようにすることを目標にした。
これを元に機能を拡張していきたいと思う。

===== code snippet =====
ソースは簡単だが、コードの一部分を次に示す。
<code javascript>
(function($) {

$.extend($.fn, {
	monitor: function(options){

		// check if a monitor was already created
		var monitor = $.data(this[0], 'monitor');
		if ( monitor ) {
			return monitor;
		}

		monitor = new $.monitor( options, this[0] );
		$.data(this[0], 'monitor', monitor); 

		return monitor;
	}
});

// constructor for monitor
$.monitor = function( options, target) {
	 this.settings = $.extend( true, {}, $.monitor.defaults, options );
	 this.target = target;
	 this.init();
}; 

$.extend($.monitor, {
	defaults:{
		timeout : 500,
		events : [scroll]		
	},
	setDefaults: function(settings) {
		$.extend($.monitor.defaults, settings );
	}, 
	prototype: {
		init: function(){
			this._idleTime = null;
			this._timer = null;
			this._state = "on";
			this.idleTime = null;

			this.initObservers(this.target, this.settings.events);
			this.setTimer(this.target);
		},
		
		initObservers: function(target, events){
			var oj = this;
			$.each(events, function(i, e){
				$(target).bind(e, function(event){					
					oj.onInterrupt(target, event);
				});
			});
		},
		onInterrupt: function(target, event){
			this.idleTime = new Date() - this._idleTime;
			$(target).bind("state:active", function(){}).trigger("state:active", $.monitor.onActive(this.idleTime));
			this.setTimer(target);
		},
		setTimer: function(target){
			clearTimeout(this._timer);		
			if(this._state=="on"){
				this._idleTime = new Date();
				this._timer = setTimeout(function(){
					$(target).bind("state:idle", function(){}).trigger("state:idle", $.monitor.onIdle());
					},this.settings.timeout); 
			}
		}
	
	},
	onMonitor : function(){
		this._state = "off";
	},
	offMonitor : function(){
		this._state = "on";
	},
	onIdle: function(){
		return false;
	},
	onActive: function(args){
		return false;
	}
});

})(jQuery);
</code>

optionsはtimeout時間（defaultで1000ms）と登録するイベント（defaultでscrollイベント)が指定できる。\\
dojoで作成したときは、登録するターゲットとイベントを共に指定したが、jQueryはターゲットを指定してからpluginで
メソッドを呼び出すため、分離することにした。\\
メソッドの呼び方については後ほど説明する。

使う際にはonActiveメソッドとonIdleメソッドをoverrideする必要がある。基本的には何もしないことにしている。
===== demo page =====
pluginを呼び出す部分を次に示す。
<code javascript>
//override default onActive method
$.monitor.onActive = function(args){
	$("p").css("opacity",1);
	debug("active... after: " + args + "ms");
}
//override default onIdle method
$.monitor.onIdle = function(){
	$("p").css("opacity",0.2);
	debug("idle...");
}

$().ready(function(){
	$(document).monitor({timeout: 5000, events:['mousemove','keydown']});
	$(window).monitor({events:['resize','scroll']});
});
</code>
基本的に
defalutメソッドであるonActiveメソッドとonIdleメソッドをoverrideしてから、monitorメソッドを呼び出す。
デモページでは、documentに対してtimeout５秒を指定してある。windowのりサイズイベントとスクロールイベントに対しては
defaultの１秒がたったらIdleステートになる。

デモは[[http://ria-web.info/test/jQuery/demo/demo01.html|demo page]]から確認できる。

トレース: • csv • proxy • singleton • jmail • state • observer • design_pattern • threadpool

ナビゲーション

検索

ツールボックス

QR Code