SliderNav::jQueryでiPhoneの連絡先UIを実装

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>