iTunesのプレイリストってアーティスト名が見出しになってスクロール追従してますよね。
シンプルでかっこいいUIだなと思ってました。
↓こういうの
そこで、tableの複数見出しスクロール追従を実装するjQueryプラグインを作ってみました。
日付などでソートされているリストのがあれば、結構見やすくなるのではないかと。
デモとダウンロード
Demo
ダウンロードはこちらからどうぞ
jquery-AlternatelyHeaderOfTable (GitHub)
とりあえず公開してみただけなので、ちょくちょく修正していくつもりです。
プラグインの使い方
<table>
の中に<tbody>
を複数記述します。
見出しにしたい<tbody>
に適当なクラス名をつけてください。
<table>
<tbody class="header">
...
</tbody>
<tbody>
...
</tbody>
<tbody class="header">
...
</tbody>
<tbody>
...
</tbody>
</table>
後はセレクタで当該<tbody>
を指定して、関数を呼び出してあげます。
<script>
$(function() {
$("table tbody.header").AlternatelyHeaderOfTable();
});
</script>
これで動作します。
オプション値等は特に設定していません。
theadは複数記述したらダメ
テーブルの見出しといえば<thead>
です。
最初は<table>
中の<thead>
を固定しようと思ったんですが、どうやら<thead>
は<table>
内に一つしか記述してはいけないらしいです...
その代わり<tbody>
は複数記述していいそうなので、見出し用の<tbody>
を用意することにしました。スマートじゃないなぁ
プラグインの中身の話
親要素の<table>
をposition: relative
にして、
スクロールに合わせて見出しとなる<tbody>
を順番にposition: absolute
にするだけの簡単なお仕事。
...と思いきや、意外と条件分岐が多くて、大変でした。
私事
何気にQiitaへの投稿も初めてですが、GitHubを利用するのも今回が初めてだったのですごい大変だった...
そういえばjQueryプラグインも初めて作りました。
...勉強になった気がする。