Table Color Changer 2
テーブルの色を変える
IE4+, Gecko, Opera7+
Table Color Changer 2 とは
当ライブラリは閲覧者が特に大きなテーブル内のデータを追いやすくする為に、 テーブルの列や行の色の変更、 マウスカーソルが乗ったセルの色の変更、クリックされたセルの色の変更等 スタイルを簡単に変更できるような関数を提供します。 初心者の方は簡単に、それなりに知っている方はより複雑に利用できるようになっています。
ライブラリが出来ること
- マウスカーソルが乗った TR 又は TD 要素のスタイルを変更
- クリックされた TR 又は TD 要素のスタイルを変更
- テーブルの行、列にスタイルをセット
- テーブル内のデータをドラッグして移動 ( IE6 専 )
- あるノードに対して一定時間ごとにスタイルを適用
- ライブラリが拾ったイベントの受け取り
ダウンロード
Download [ tcc2.js ]
概要
クリックされたセル、 マウスが乗ったセルの色又はスタイルを変更する
閲覧者が現在参照しているデータにマウスカーソルを乗せると背景色等スタイルが変り その行のデータを目で追いやすくさせます。更にクリックすることでその変わった スタイルを固定させ後から再度参照する際のマーキングとすることができます。
テーブルの行、列に対し色又はスタイルを変更する
大きなテーブル内のデータを目で追うことはシバシバ苦痛です。 そこで考えるのは交互に行の背景色を変えたり、10行おきに区切りとして 背景色を変えたりする等して閲覧者がデータを追いやすくしてあげる、 ということではないかと思われます。この関数は製作者側で属性をシコシコと 記述するという作業を簡単にすることができます。
データをドラッグし任意の場所へ移動する
複数のデータを見比べたい場合、やはりそのデータ同士が隣接している と断然楽です。そこで任意のデータを任意の場所へと移動できるようにして ストレスを軽減させます。
※ この機能は IE6 以外は使えません
あるノードに対し一定時間ごとにスタイルを適用する
所謂 Blink を提供します。嫌われがちなモノですので上手く利用してください。 おまけ的な関数です。
横流しされたイベントを拾う
ライブラリの setEvent() 関数で拾っている onMouseOver, onMouseOut, onClick 各イベントを更に下方へと流します。これはイベント発生時にライブラリにはない処理を 独自に利用できる為、より複雑でユニークな拡張が可能となります。
サンプル
サンプルがしていること
- 偶数行には青色 [ setColColor ]
- 奇数行には薄い青色 [ setColColor ]
- 左右の端から3列目には濃い青色 [ setRowColor ]
- マウスカーソルが乗ると行が赤く変化 [ setEvent ]
- クリックで行の背景色が固定 [ setEvent ]
- (IE6) 行をドラッグ&ドロップで任意の行へ移動 [ setDD ]
- クリックっされたセルのイベント onClick を拾い一秒間点滅させる [ onclick, setBlink, clearBlink ]
ほぼ全ての機能を使ったサンプル
Copyright(C) 2002-2005 kerry.