前の記事 ≪:少ないスペース内でコンテンツをグリグリスクロールさせられるjQuery...
次の記事 ≫:2009年11月26日 管理人のブックマーク

テーブルのユーザビリティを飛躍的に向上させる「Chromatable」

2009年11月26日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。
Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。

普通のテーブル


Chromatableで初期化


次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。



実装方法

実装方法も超簡単で、JSコード自体はたったの1行で実装可能。

<!-- ライブラリ読込み -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.chromatable.js"></script>


<!-- 初期化方法1 -->
<script>
$(document).ready(function(){
    $("#yourTableID").chromatable(); // 初期化
});
</script>

<!-- 初期化方法2:オプション指定 -->
<script>
$("#yourTableID2").chromatable({ // オプションを指定して初期化
    width: "900px",
    height: "400px",
    scrolling: "yes"
});
</script>

仮にJavaScript がオフでも素のテーブルが表示され、問題にはなりません。

以下のエントリを参照してください。
Chromatable JQuery Plugin | Chromaloop

関連エントリ

関連の記事検索:jQuery, JavaScript, table, テーブル, ユーザビリティ, Ajax
スポンサード リンク

By.KJ : 2009年11月26日 19:00 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)