iPhone や iPad などの iOS で電話帳(正確には連絡先)やアーティスト一覧で、画面の右側にアルファベットや50音のリストが並べられているインターフェース。
あの電話帳UIのjQueryプラグインがありました。 『SliderNav』 です。
SliderNav: iPhone Style Contact Lists Using jQuery and CSS
サイトのDownloadリンクからZipファイルをダウンロードして解凍します。
実行した感じはこんな感じ、 DEMO
使われているJqueryは1.4.2でした。jQuery Mobile1.0.1に対応させるためにjquery-1.7.1をあててみましたが不具合はないようです。
jQuery Mobile と 日本語のメニューに対応してみたSliderNavはこちら
<script src="jquery/jquery-1.7.1.min.js"></script> <link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css" /> <script src="jquery/jquery.mobile-1.0.1.min.js"></script>
日本語のメニューについても元のデモの方のExsample2のほうを参考にして、
$(document).ready(function(){ $('#slider').sliderNav(); $('#transformers').sliderNav({items:['あ','い','う','え','お'], debug: false, height: '300', arrows: true}); });
としてオプションの値を渡してやればうまくいきました。
iPhoneでの表示も若干調整を要求されましたが、まぁまぁいい感じ。
aタグにtelの属性を与えておいてあげると、電話をかけるのもスムーズにいきそうです。
<li><a href="tel:117">あおやま</a></li>
コメント