普通のリストをiPhoneUIのような見出しで区切られたスクロールリストに変えるjQueryプラグインです。
<ul></ul>リスト～以下省略～
対象のページにiPhoneLikeList-x.x.x.cssを読み込んでください。
<link rel="stylesheet" type="text/css" href="iPhoneLikeList-x.x.x.css">
jQueryを読み込んだ後、本プラグインiPhoneLikeList-x.x.x.min.jsを読み込んでください。
<script type="text/javascript" charset="UTF-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="iPhoneLikeList-x.x.x.min.js"></script>
区切りになる要素<li></li>にクラス名dividerを付与してください。
<ul id="sample1">
<li>あ行</li>
<li>アイスランド共和国</li>
<li>アイルランド</li>
<li>アゼルバイジャン共和国</li>
<li>アフガニスタン・イスラム共和国</li>
<li>アメリカ合衆国</li>
<li>アラブ首長国連邦</li>
<li>アルジェリア民主人民共和国</li>
<li>アルゼンチン共和国</li>
<li>アルバニア共和国</li>
<li>アルメニア共和国</li>
<li>アンゴラ共和国</li>
<li>アンティグア・バーブーダ</li>
<li>アンドラ公国</li>
<li>い</li>
<li>イエメン共和国</li>
<li>グレートブリテン及び北アイルランド連合王国</li>
<li>イスラエル国</li>
<li>イタリア共和国</li>
<li>イラク共和国</li>
<li>イラン・イスラム共和国</li>
<li>インド (インド/印度/印)</li>
<li>インドネシア共和国</li>
</ul>
<ul id="sample1">
<li class="divider">あ行</li> <!-- 区切りにクラスdividerを付与 -->
<li>アイスランド共和国</li>
<li>アイルランド</li>
<li>アゼルバイジャン共和国</li>
<li>アフガニスタン・イスラム共和国</li>
<li>アメリカ合衆国</li>
<li>アラブ首長国連邦</li>
<li>アルジェリア民主人民共和国</li>
<li>アルゼンチン共和国</li>
<li>アルバニア共和国</li>
<li>アルメニア共和国</li>
<li>アンゴラ共和国</li>
<li>アンティグア・バーブーダ</li>
<li>アンドラ公国</li>
<li class="divider">い</li> <!-- 区切りにクラスdividerを付与 -->
<li>イエメン共和国</li>
<li>グレートブリテン及び北アイルランド連合王国</li>
<li>イスラエル国</li>
<li>イタリア共和国</li>
<li>イラク共和国</li>
<li>イラン・イスラム共和国</li>
<li>インド (インド/印度/印)</li>
<li>インドネシア共和国</li>
</ul>
その後、ページがロードされたら、対象リストエレメントに対しiPhoneLikeList()を実行します。
<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
$('#sample1').iPhoneLikeList();
});
</script>