Mobiscroll

概要

Mobiscroll は、iPhone の日付入力時に使用するようなドラム式メニューを実装するための JavaScript ライブラリです。
これ単体では動作せず、jQuery, jQuery Mobile, Zepto.JS, jQMobi あたりのフレームワーク上で動くようです。

公式サイト から、JavaScript ファイルとスタイルシート一式をダウンロードして使用します。
ダウンロードは有料と無料のものが混在しているようなので注意。

使用方法

Mobiscroll は、様々なタイプのメニューを実装可能なのですが、ここでは単なる LI 要素からなる画像リストをドラム式メニューとして表示する例を紹介します。
使用するライブラリは、jQuery を例とします。

jQuery および Mobiscroll のサイトからダウンロードしてきた JavaScript ファイル、スタイルシートを詠み込みます。

 <script src="/js/jquery-1.4.3.min.js"  type="text/javascript"></script>
 <script src="js/mobiscroll.core-2.4.4.js" type="text/javascript"></script>
 <script src="js/mobiscroll.list-2.4.4.js" type="text/javascript"></script>

メニューの内容を HTML で記述します。

 <ul id="menu">
 <li><div class="menu_list"><img src="test1.png" /></div></li>
 <li><div class="menu_list"><img src="test2.png" /></div></li>
 <li><div class="menu_list"><img src="test3.png" /></div></li>
 </ul>

メニューをドラム式メニュー化します。

 <script type="text/javascript">
   $('#menu').mobiscroll().image({
        display: 'inline',
        mode: 'scroller',
        height:         55,
        showLabel:      false,
        showInput:      false,
    });
 })
 </script>

サンプル

サンプル：Mobiscroll に、Mobiscroll サイトからダウンロードしてきたデモをやや簡易にしたサンプルがありますので、参考までにどうぞ。