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

| カテゴリー : Andoriod,iPhone,Jquery,Webサービス | コメント (0)   はてなブックマーク - 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>

おしらせ

  • Calemdar

    2012年2月
    « 1月   3月 »
     12345
    6789101112
    13141516171819
    20212223242526
    272829  
  • Category

  • Archive

  • Latest articles

  • Tag Cloud