iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました

iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。
最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。

と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。
jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。

そこで、jQueryでもCarousel風のUIをサクサクッと作れちゃうjQuery Plugin「jCarousel」を作りました。
jCarousel Demo（できればiPhoneで見てね）

jQTouchに習って、ファイルを読みこんでHTMLを書き書きするだけで作れちゃうサクサク方式の使い方なので、ぜひ気軽に試してみてください。

jQTouchと使うことを想定しながら書いていましたが、別に単体でも使えるので、jQTouchじゃなくても良いです。
iPhone･iPadのMobile Safariで動作することを前提としていますが、一応PC版のSafariでも動くようにしました（Firefoxは確認していませんが、たぶん動くと思います）。

jCarousel StartUp Guide

[1] jQueryをDLしてきて下さい

http://jquery.com/でjQueryのファイルをDLして下さい（バージョンは1.3でも1.4でもOK）。

[2] プラグインファイルをDLして下さい

プラグインファイル「jCarousel」をDLして下さい。
jCarousel.min.js (5KB)

[3] ファイルを読みこみます

jQueryとjCarouselのJSファイルを読みこみます

<script src="js/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jCarousel.min.js" type="application/x-javascript" charset="utf-8"></script>

[4] HTMLを書きます

リスト構造のHTMLを書きます。リスト要素（ul or ol）には、jCarouselクラスを設定します。

<ul class="jCarousel">
	<li><img src="sample1.jpg" /></li>
	<li><img src="sample2.jpg" /></li>
	<li><img src="sample3.jpg" /></li>
</ul>

[5] 完了

後は自動的にいろいろ生成されます。
jCarouselクラスを設定したリスト要素はCSSで高さ指定をした方が良いと思います。

jQTouchと一緒に使う場合

jQTouchと一緒に使う場合は、jQTouchのイニシャライズの後にプラグインファイルを読みこまないと、上手くいかないことがあるようです。また、このときリスト要素はulよりもolを使った方がイイです。

AJAXで動的に表示させるページにjCarouselを設置したい場合は、少しコツがあるようで、AJAXで動的に表示させるページの最下部に以下のように記述するとよいです。

<script type="text/javascript">
$(function(){
	$(".jCarousel").css({visibility:"hidden"});
	$(".ajaxPage").bind('pageTransitionEnd', function(e, info){
		if (info.direction == 'in' && $(this).data('loaded') != 'true'){
			jCarousel.set();
			$(".jCarousel").css({visibility:"visible"});
		}
	});
});
</script>

CSSでjCarousel部分を非表示にしておいて、Ajaxページに遷移した後にjCarousel.set()を実行し、再びCSSで表示にする。
ココでのポイントは「pageTransitionStart」ではなく「pageTransitionEnd」という部分で、「pageTransitionStart」だとなぜだかjCarouselの高さが0になり上手くいかないようです。

jCarousel Demo（できればiPhoneで見てね）

他に、不具合などありましたらコメント下さい。

不具合の修正・変更点

â—†2010/08/10 Ver.1.2
・PCブラウザでの操作時にスライドが上手く動かないことがある不具合を修正しました。
・PCブラウザのウィンドウをリサイズした際に横幅が再設定されるように変更しました。
・Javascriptなどで動的にjCarouselリストを生成した場合に、jCarousel.set()関数を呼出すことで動的に生成できるように変更しました（jCarousel.set()関数はHTML読み込み時にデフォルトで実行されます）。

â—†2010/11/28 Ver.1.3
・スライド時にスクロールが発生しないように修正
・スクロール時にイベントが発生しないように修正
・入れ子でリスト要素を使用したときに発生するバグを修正
・高さの自動取得を行うように修正