[jQuery] ウィジェットを作る (3)

というわけで、ウィジェットを簡単に作ってみた。Twitterっぽく何がしかをマウススクロールで自動読み込み･表示する(これなんていうんでしょう)。一応IE6やiPhoneでも動くもよう。バグってたらすいません。

サンプル

スクロール位置と呼び出し要素の下端の座標によってPHPからJSONを読み込み、jQuery.tmpl()を使用してテンプレートを適用して表示するというもの。

テンプレート読み込みやスクロールの監視を担当するウィジェット(nbnote.itemLoader)が、渡されたJSONのURLとテンプレートもとに読み込み･表示を行うウィジェット(nbnote.items)を制御する形で構成しています。
これみよがしにalpha versionとか書いてあるだけあって、色々足りてません。コードも汚い。

JSONの内容は下記のような感じで

{
	"item": [{
		"title": "タイトル",
		"description": "テキストテキストテキスト",
		"image": "image/dummy.png"
	},
	～中略～
	]
}

テンプレートは下記で、

<script type="text/x-jquery-tmpl">
	{{each item}}
	<div class="item clearfix">
		<img src="${image}" alt=""/>
		<div>
			<h2>${title}</h2>
			<p>${description}</p>
		</div>
	</div>
	{{/each}}
</script>

呼び出しは下記のようになります。

$(function() {
	$('#itemList').itemLoader({
		jsonURL: 'json.php', // 「json.php?page=数値」というURLでアクセスを行い、続きを読み込む度に数値をカウントアップする
		templateURL: 'template.html', // テンプレートHTMLのURL
		spinner: 'image/ajax-loader.gif',// ロード中のアイコン(なくてもOK)
		oddClassName: 'odd'// 奇数番のアイテムに付与されるクラス名(なくてもOK)
	});
})

この程度のものであればわざわざウィジェットにする意味は少ないのですが、特に工夫無く普通にjQuery.fnオブジェクトにメソッドをアタッチしてプラグインにするやり方だと、ここからさらにあれやこれやの仕様を付けたされた場合にすぐにカオスになってしまうのです。あ、僕の話です。

ここ一度だけの機能を実装したいという場合には不向きかもしれませんが、仕様がかなり複雑であったり、サイト内で色々な機能が色々な箇所で使い回されたりするような案件の場合は、かなり便利に使えます。

以上、後にいくほどグダグダになりましたが、jQueryのウィジェットについてでした。
今回サンプルで作ったウィジェットは、気が向いたら完成させようと思います…。

関連記事

Tweet