Web Development

iPhone like List / iPhoneのようなスクロールリスト

普通のリストをiPhoneUIのような見出しで区切られたスクロールリストに変えるjQueryプラグインです。

普通の<ul></ul>リスト

  • あ行
  • アイスランド共和国
  • アイルランド
  • アゼルバイジャン共和国
  • アフガニスタン・イスラム共和国
  • アメリカ合衆国
  • アラブ首長国連邦
  • アルジェリア民主人民共和国
  • アルゼンチン共和国
  • アルバニア共和国
  • アルメニア共和国
  • アンゴラ共和国
  • アンティグア・バーブーダ
  • アンドラ公国
  • イエメン共和国
  • グレートブリテン及び北アイルランド連合王国
  • イスラエル国
  • イタリア共和国
  • イラク共和国
  • イラン・イスラム共和国
  • インド (インド/印度/印)
  • インドネシア共和国

~以下省略~

iPhoneのようなスクロールリスト

  • あ行
  • アイスランド共和国
  • アイルランド
  • アゼルバイジャン共和国
  • アフガニスタン・イスラム共和国
  • アメリカ合衆国
  • アラブ首長国連邦
  • アルジェリア民主人民共和国
  • アルゼンチン共和国
  • アルバニア共和国
  • アルメニア共和国
  • アンゴラ共和国
  • アンティグア・バーブーダ
  • アンドラ公国
  • イエメン共和国
  • グレートブリテン及び北アイルランド連合王国
  • イスラエル国
  • イタリア共和国
  • イラク共和国
  • イラン・イスラム共和国
  • インド (インド/印度/印)
  • インドネシア共和国
  • ウガンダ共和国
  • ウクライナ
  • ウズベキスタン共和国
  • ウルグアイ東方共和国
  • エクアドル共和国
  • エジプト・アラブ共和国
  • エストニア共和国
  • エチオピア連邦民主共和国
  • エリトリア国
  • エルサルバドル共和国
  • オーストラリア連邦
  • オーストリア共和国
  • オマーン国
  • オランダ王国
  • か行
  • ガーナ共和国
  • カーボベルデ共和国
  • ガイアナ共和国
  • カザフスタン共和国
  • カタール国
  • カナダ
  • ガボン共和国
  • カメルーン共和国
  • ガンビア共和国
  • カンボジア王国
  • ギニア共和国
  • ギニアビサウ共和国
  • キプロス共和国
  • キューバ共和国
  • ギリシャ共和国
  • キリバス共和国
  • キルギス共和国
  • グアテマラ共和国
  • クウェート国
  • グルジア
  • グレナダ
  • クロアチア共和国
  • ケニア共和国
  • コートジボワール共和国
  • コスタリカ共和国
  • コモロ連合
  • コロンビア共和国
  • コンゴ共和国
  • コンゴ民主共和国
  • さ行
  • サウジアラビア王国
  • サモア独立国
  • サントメ・プリンシペ民主共和国
  • ザンビア共和国
  • サンマリノ共和国
  • シエラレオネ共和国
  • ジブチ共和国
  • ジャマイカ
  • シリア・アラブ共和国
  • シンガポール共和国
  • ジンバブエ共和国
  • スイス連邦
  • スウェーデン王国
  • スーダン共和国
  • スペイン
  • スリナム共和国
  • スリランカ民主社会主義共和国
  • スロバキア共和国
  • スロベニア共和国
  • スワジランド王国
  • 赤道ギニア共和国
  • セーシェル共和国
  • セネガル共和国
  • セルビア共和国
  • セントクリストファー・ネイビス連邦
  • セントビンセントおよびグレナディーン諸島
  • セントルシア
  • ソマリア
  • ソロモン諸島
  • た行
  • タイ王国
  • 大韓民国
  • タジキスタン共和国
  • タンザニア連合共和国
  • チェコ共和国
  • チャド共和国
  • 中央アフリカ共和国
  • 中華人民共和国
  • チュニジア共和国
  • 朝鮮民主主義人民共和国
  • チリ共和国
  • ツバル
  • デンマーク王国
  • ドイツ連邦共和国
  • トーゴ共和国
  • ドミニカ共和国
  • ドミニカ国
  • トリニダード・トバゴ共和国
  • トルクメニスタン
  • トルコ共和国
  • トンガ王国
  • な行
  • ナイジェリア連邦共和国
  • ナウル共和国
  • ナミビア共和国
  • ニカラグア共和国
  • ニジェール共和国
  • 日本国
  • ニュージーランド
  • ネパール連邦民主共和国
  • ノルウェー王国
  • は行
  • バーレーン王国
  • ハイチ共和国
  • パキスタン・イスラム共和国
  • ※ バチカン市国
  • パナマ共和国
  • バヌアツ共和国
  • バハマ国
  • パプアニューギニア独立国
  • パラオ共和国
  • パラグアイ共和国
  • バルバドス
  • ハンガリー共和国
  • バングラデシュ人民共和国
  • 東ティモール民主共和国
  • フィジー共和国
  • フィリピン共和国
  • フィンランド共和国
  • ブータン王国
  • ブラジル連邦共和国
  • フランス共和国
  • ブルガリア共和国
  • ブルキナファソ
  • ブルネイ・ダルサラーム国
  • ブルンジ共和国
  • ベトナム社会主義共和国
  • ベナン共和国
  • ベネズエラ・ボリバル共和国
  • ベラルーシ共和国
  • ベリーズ
  • ペルー共和国
  • ベルギー王国
  • ポーランド共和国
  • ボスニア・ヘルツェゴビナ
  • ボツワナ共和国
  • ボリビア多民族国
  • ポルトガル共和国
  • ホンジュラス共和国
  • ま行
  • マケドニア共和国
  • マーシャル諸島共和国
  • マダガスカル共和国
  • マラウイ共和国
  • マリ共和国
  • マルタ共和国
  • マレーシア
  • ミクロネシア連邦
  • 南アフリカ共和国
  • 南スーダン共和国
  • ミャンマー連邦共和国
  • メキシコ合衆国
  • モーリシャス共和国
  • モーリタニア・イスラム共和国
  • モザンビーク共和国
  • モナコ公国
  • モルドバ共和国
  • モルディブ共和国
  • モロッコ王国
  • モンゴル国
  • モンテネグロ
  • や行
  • ヨルダン・ハシミテ王国
  • ら行
  • ラオス人民民主共和国
  • ラトビア共和国
  • リトアニア共和国
  • リビア
  • リヒテンシュタイン公国
  • リベリア共和国
  • ルーマニア
  • ルクセンブルク大公国
  • ルワンダ共和国
  • レソト王国
  • レバノン共和国
  • ロシア連邦

フリーダウンロード

最新版
Ver. 0.9.2
リリース日
2014/07/24

設置作業代行

日程調整
即日〜
作業時間
半日程度
作業費用
¥3,000円
(消費税込み)

設置予定URL

オンラインデモ

使い方

CSS

対象のページにiPhoneLikeList-x.x.x.cssを読み込んでください。


<link rel="stylesheet" type="text/css" href="iPhoneLikeList-x.x.x.css">

JavaScript

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>

HTML

区切りになる要素<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>

カスタマイズ / サポート 最新版 ダウンロード