指定範囲内にタブ移動の範囲を制限するjQuery拡張

##指定範囲内にタブ移動の範囲を制限するjQuery拡張
#カスタムダイアログの範囲にフォーカスを制御したいときとかに
よくあるダイアログ範囲外にタブフォーカスが回りこんじゃう奴の防止。
jQuery.ui.dialogの手法がいいなーって思ったのでそこだけ使えるようにしてみた。
セレクタの範囲を広げれば自由に制御可能。
でも最初と最後をつないでいるだけなので、範囲内での遷移順位はDOM生成順番に依存するはず。

(function($) {
	$.fn.tabChain = function(option) {
		option = $.extend({},{onReadyFocus:false},option);
		
		var chains = [];
		
		var init = function(){
			var first = chains[0];
			var last = chains[chains.length-1];
			
			for(el in chains){
				$(chains[el]).keydown(function(event){
					if (event.keyCode !== 9) {
						return;
					}
					if (event.target === last && !event.shiftKey) {
						first.focus(1);
						return false;
					}
					else if (event.target === first && event.shiftKey) {
						last.focus(1);
						return false;
					}
				})
			}
			if(option.onReadyFocus == true){
				first.focus();
			}
			
		}
    	
		this.each(function(){
			chains.push(this);
		})
		
		init();
    };
})(jQuery);

#使い方
範囲をjQueryセレクタで指定してください。
異なる要素や子要素纏めてとか1発でとってこられるjQueryセレクタはほんと優秀ですね！(´∀｀*)

(function($){
    $('input:text').tabChain({onReadyFocus:true});
})(jQuery);

##オプションについて

• onReadyFocus　trueを指定するとこの拡張が有効になったタイミングで、指定した範囲内の先頭に当たる項目に自動フォーカスします。