jQueryで、サービスのユーザビリティを改良

jQueryでクッキーを利用するjquery.cookie.js プラグイン

Plugins | jQuery Plugins

 flickr_idという名前で、Cookieをセットする
 $.cookie('flickr_id', $.flickr.s.user_id); 

 Cookieから値を読み込んで、input フォームに入力
 $("#flickr_id").attr("value", function(){ return $.cookie('flickr_id') || "" ;});

jQueryでの、JSON呼び出しは非常に簡単

getJSONメソッドを呼び出すだけで、callback実行まで自動でやってくれます。

$.getJSON(url, function(r) {
	// JSONを読み込んだあとの処理を記述
	$.flickr.loadImages(r, $.flickr.s);
});

jQueryで、Ajaxの読み込み中にローディング画像を表示

表示したいローディング画像やdivなどに、id="loading"を追加して、jQueryで以下を指定。

$("#loading").bind("ajaxSend", function(){
  $(this).show();
}).bind("ajaxComplete", function(){
  $(this).hide();
});

formのsubmitを、javascriptで制御する

formのsubmitボタンに、jQueryで functionを追加する場合は、最後に return false; することで、IEなど一部のブラウザで画面遷移してしまうのを防げる。

$("form#flickr_form").submit( function () {
	$("#container").show("blind");
	$.flickr.s.user_id = $("#flickr_id").attr("value");
	$.flickr.s.tags = $("#flickr_tags").attr("value");
	$.flickr.s.per_page = $("form#flickr_form input[name=per_page]:radio:checked").attr("value");
	$.cookie('flickr_id', $.flickr.s.user_id); 
	$.flickr.request();
	return false;
});

$.each を使ってコードをすっきり

jQueryの強力なセレクタと、each メソッドの組み合わせで処理を簡潔に記述。

// 選択されているチェックボックスの値を配列に追加
$("input:checkbox:checked.imagechoice").each(function(){
  $.flickr.order.push(this.value);
});

三項演算子は楽しい

if, else がどんどん短くなって楽しい。

var size = $("#menu_l").attr("checked") ?  this.jpg.medium : this.jpg.small;

あと、inputがnullだった場合などに、デフォルト値を設定するのに ||も便利。

$.flickr.s.user_id = $("#flickr_id").attr("value") || "デフォルト値";;

このあたりは、jQuery本体や，jQuery UIのソースコードを読むとすごく勉強になりますね。次はクロージャなどを、ちゃんと使えるようになってみたい。