Archive for 6月, 2010

今回は前回のjQuery UIの形式でフォームへの入力内容を監視するプラグインを作ってみた。まだ作りかけだが、正規表現で内容をチェックして正しい内容かチェックしてくれる優れモノだ。ありふれたネタではあるがサンプルとして貼ってみる。

(function($){
$.widget("sample.inputchecker",{
	options: {
		exp:/.{4,50}/,
		reject:"4文字以上50文字以下の文字列を入力してください。",
		accept:"正しい入力です。",
		acceptCSS:{
			"font-size":"0.7em",
			"font-weight":"bold",
			"color":"#5c5"
		},
		rejectCSS:{
			"font-size":"0.7em",
			"font-weight":"bold",
			"color":"#c55"
		},
		acceptIcon:undefined,
		rejectIcon:undefined
	},
	_init: function() {
		var obj = this;
		var options = obj.options;
		var icon = $("<img></img>");
		var mesbox = $("<div></div>");
		icon.css({
			"width":"16px",
			"height":"16px"
		});
		function checkValue(){
			if(obj.element.val().match(obj.options.exp)) {
				mesbox.text(obj.options.accept);
				mesbox.css(obj.options.acceptCSS);
				if(obj.options.acceptIcon!=undefined) {
					icon.attr("src",obj.options.acceptIcon);
				}
			} else {
				mesbox.text(obj.options.reject);
				mesbox.css(obj.options.rejectCSS);
				if(obj.options.rejectIcon!=undefined) {
					icon.attr("src",obj.options.rejectIcon);
				}
			}
		};
		obj.element.after(mesbox);
		obj.element.after(icon);
		obj.element.keyup(checkValue);
		checkValue();
	}
});
})(jQuery);

$(“input”).inputchecker();とでも書いてやれば、内容が4文字以上50文字以下か自動でチェックしてくれる入力ボックスの完成だ。

$("input").inputchecker({
	exp:/.{4,100}/,
	acceptIcon:"accept.png",
	rejectIcon:"reject.png"
});

とすると4文字以上100文字以下かチェックする入力ボックスとなる。アイコン画像を指定してやればボックスの右に状態も表示してくれる優れモノ。

今回からタイトルを変更したいと思う。なぜならば、jQuery UIのプラグイン形式というものもあり、そちらに準拠した方があとあといいのではないか、という判断だ。どんな形式かというとこちら。

(function($){
	$.widget("foobar.plugin",{
		options: {
			css:{
				"font-size":"24px"
			}
		},
		_init: function() {
			this.element.css(this.options.css);
		};
	});
})(jQuery);

jQueryセレクタで選んだ要素のスタイルを変更するプラグイン。これを実際に使うには、

$("div").plugin();

のように使ってやるといい。

$("div").plugin({
	css:{
		font-size:4px,
		font-weight:bold
	}
});

のようにオプションを指定してやることもできる。かなり便利ですね。

onclick要素を用いてJavaScriptを呼び出す際の注意点。
シングルクオーテーションをHTMLエンコードすると&#39;(&は本来半角文字)という表記になるが、これがJavaScriptへ引数として渡す文字列の中に含まれていると、なんとシングルクオーテーションとして認識されてしまう。XSSの原因となるので注意しよう。

onclickでJavaScriptに渡す際にデコードしているということだろうか。なんとも分かりにくい仕様だなあ・・・。

最近気になるもの

・Sinatra Rubyの超軽量Webフレームワーク。なんかのプロトタイプを作るのにはぴったりかも。

・Scala Twitterで本格的に導入されたので有名。オブジェクト指向言語と関数型言語のいいとこどり、らしい。JavaScriptにはまってる俺からしたらちょい気になるもの。

・SproutCore JavaScriptのみでMVCフレームワークやリッチなUIを実現するものらしい。Railsのような生産性?まだよく分からない。開発にはRubyを使うらしい。近いうちに試してみたい。

・VoltDB 分散型オンメモリデータベース、超高速らしい。RDBMSを使うまでもないWebアプリ上での使用とかに適切なのかな。ただしストアドプロシージャしか使えないので、使いどころは限られてくるかも。一応SQLの構文に対応しているらしい?

カレンダー
2010年6月
« 5月   7月 »
 123456
78910111213
14151617181920
21222324252627
282930