Plugin「jCarousel」作りましたiPhoneJavascript開発iPhone・iPadのWebアプリケーション開発を相変わらず研究しています。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ(本当に)ガッツリ研究していこうと思います。Touchの話になりましたが、今回はjQueryのプラグインです。Touchに比べると用意されているUIもイベントなんかも少ないんですよね。TouchみたいにいろんなUIを使いたいところです。Plugin「jCarousel」を作りました。Demo(できればiPhoneで見てね)jQTouchに習って、ファイルを読みこんでHTMLを書き書きするだけで作れちゃうサクサク方式の使い方なので、ぜひ気軽に試してみてください。jQTouchと使うことを想定しながら書いていましたが、別に単体でも使えるので、jQTouchじゃなくても良いです。Safariで動作することを前提としていますが、一応PC版のSafariでも動くようにしました(Firefoxは確認していませんが、たぶん動くと思います)。jQueryをDLしてきて下さいhttp://jquery.com/でjQueryのファイルをDLして下さい(バージョンは1.3でも1.4でもOK)。プラグインファイルをDLして下さいプラグインファイル「jCarousel」をDLして下さい。HTMLを書きますリスト構造のHTMLを書きます。ol)には、jCarouselクラスを設定します。後は自動的にいろいろ生成されます。jCarouselクラスを設定したリスト要素はCSSで高さ指定をした方が良いと思います。jQTouchと一緒に使う場合jQTouchと一緒に使う場合は、jQTouchのイニシャライズの後にプラグインファイルを読みこまないと、上手くいかないことがあるようです。このときリスト要素はulよりもolを使った方がイイです。AJAXで動的に表示させるページにjCarouselを設置したい場合は、少しコツがあるようで、AJAXで動的に表示させるページの最下部に以下のように記述するとよいです。&#39;true&#39;){jCarousel.set();$(&#34;.jCarousel&#34;).css({visibility:&#34;visible&#34;});}});});&lt;/script&gt;CSSでjCarousel部分を非表示にしておいて、Ajaxページに遷移した後にjCarousel.set()を実行し、再びCSSで表示にする。ココでのポイントは「pageTransitionStart」ではなく「pageTransitionEnd」という部分で、「pageTransitionStart」だとなぜだかjCarouselの高さが0になり上手くいかないようです。Demo(できればiPhoneで見てね)他に、不具合などありましたらコメント下さい。Ver.1.2・PCブラウザでの操作時にスライドが上手く動かないことがある不具合を修正しました。・PCブラウザのウィンドウをリサイズした際に横幅が再設定されるように変更しました。・Javascriptなどで動的にjCarouselリストを生成した場合に、jCarousel.set()関数を呼出すことで動的に生成できるように変更しました(jCarousel.set()関数はHTML読み込み時にデフォルトで実行されます)。Blog|ブログを報告する。