昨日のSugamo.cssで発表したコネタをポストします。
デモ：iPhoneのiPodアプリ風のインターフェースを再現するJS
JSファイル：iPhoneのiPodアプリ風のインターフェースを再現するJS
これはiPhoneにプリインストールしてあるiPodアプリのインターフェースを再現するJavaScriptです。要jQuery。
iPodアプリで曲目リストやアーティストのリストを閲覧する際、「あ行」「か行」「さ行」みたいに並んでいるリストをスクロールしていくと、「あ行」のリストを見ているときは「あ」という見出しが画面上部に固定され、現在見ているリストがどの見出しに属するものなのかが見て分かるようになっています。つまり見出しがスクロールアウトされず、スクロールに着いてくる形になっているわけです。おそらく、一つのリストがとても長い場合は特に効果を発揮するかと思います。地味ですが確実にユーザビリティは向上するだろうという、粋な効果です。さすがApple。
何を言っているかよく分からない、という人はとりあえずデモを見てください・・・。
使い方
(X)HTMLは「見出し＋リスト（内容）＋それらを包むDIV」っていう構造になっていればOKです。内容部分はリストじゃなくても可。デモだと下記のようになっています。
<div class="genre">
<h3 class="header"><span>A</span></h3>
<div class="body">
<ul>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
</ul>
</div>
</div>必要なJSファイルを読み込んだ後、
$(対象の見出しを指定するセレクタ).iphoneH();
をドキュメントロード後に呼び出すように記述します。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphoneh.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h3.header').iphoneH();
});
</script>理屈を言えば、親DIVを基準に、見出しをposition:absoluteにしてtopの値をscrollイベントでいじっています。
見出しや内容部分は適当にスタイリングしましょう。デモだと元ネタが分かりやすいようにiPodアプリ風にまんまスタイリングしました。見出し部分に透過pngを使っていますが、IE6対策でどうのこうのとかはやっていません。
他のデザインに当てはめたときに正常に動くかはよく分からないです。多分その辺に突っ込みどころはたくさんあると思いますが（以下略