jQueryで開発にちょっと便利なツールを作ってみた

扱いやすさから大流行しているjQuery。
装飾からアニメーション、フォームのバリデーションなど、幅広く利用されています。

今回は、このjQueryを自分の開発とかコーディングを助けてくれるツールを作ってみました。
MITライセンスで公開しますので、よろしければ使ってみてください。
改変も自由です。

１）指定要素全てにボーダーを指定してくれるプラグイン

ctrlキー（windows）の2回押下で表示／非表示を切り替えられるようにします。
HTMLコーディング中にレイアウト崩れを直す時などに役立つかと。
ボーダーの分、幅が広がっちゃうけどね。背景色とか変えてみるのもアリかも。

他のキーを割り当てたい場合はこちらのサイトなどでキーコードを調べて変更すると良いです。
下のコードの「e.keyCode==17」の数字部分を該当するキーコードに置き換えればOK。
（2箇所ありますので気をつけてください。）

ダウンロードはこちら。
デモはこちら。

jQueryのコードは以下。

(function($){
	$.fn.debugline=function(options){
		var c=$.extend({
			classname:"displine"
		}, options);

		var t=this;
		var displine = function(e){
			if(e.keyCode==17){
				t.each(function() {
					target=$(this);
					if(target.attr("class")==c.classname){
						target.removeClass(c.classname);
					}else{
						target.addClass(c.classname);
					}
				});
			}
		}
		$(window).keydown(function(e){
			if(e.keyCode==17){
				$(window).bind("keydown",displine);
				setTimeout(function(){ $(window).unbind("keydown",displine); },500);
			}
		});
	};
})(jQuery);

CSS

.displine{
	border:1px red solid;
}

HTMLにjavascriptで指定要素に割り当てれば完了。

２）input type=”hidden”の値を表示してくれるプラグイン

hiddenの値を見るためだけに、いちいちソース見るのはダルいです。
こちらも同様にctrlキー2回押下で表示／非表示を切り替えられるようにします。
こちらはプラグインではなく、読み込むだけで実行可能。

ダウンロードはこちら。
デモはこちら。

jQueryのコードは以下。

$(function(){
	var t=$("input[type=hidden]");
	var flag = 0;

	var disp = function(e){
		if(e.keyCode==17){
			if(flag==1){
				t.each(function() {
					target=$(this);
					var val = target.attr("value");
					var name = target.attr("name");

					$(".hiddenVals").remove();
				});
				flag=0;
			}else{
				t.each(function() {
					target=$(this);
					var val = target.attr("value");
					var name = target.attr("name");

					target.after("
[name] "+name+"
[value] "+val+"
");
				});
				flag=1;
			}
		}
	}

	$(window).keydown(function(e){
		if(e.keyCode==17){
			$(window).bind("keydown",disp);
			setTimeout(function(){ $(window).unbind("keydown",disp); },500);
		}
	});
});

CSS

.hiddenVals{
	padding:3px;
	background-color:#FDFF9B;
	border:1px #ccc solid;
	text-align:left;
}

HTMLはjavascriptとcssを読み込むだけなので省略。

以上です。

こんなコードが欲しい！という要望とかあったらリクエストしてくだされば作るかもしれません。

ではまた。