--.--.--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2007.10.11(Thu)
TableClothサイト

HTMLで作った表(table要素)を分かりやすく表示するためのJavaScriptライブラリーです。カーソールがある行と列がハイライト表示されます。使い方もhtmlヘッダに2行追加するだけなので、シンプルで簡単。大きな表を表示したときにとてもわかりやすくなり、ユーザービリティ向上が期待できます。使い方はこちら

TableClothでこんな表が作れます

tableClothを使った表1
表の中でマウスカーソールを適当に動かすと、カーソールのある表の行と列が緑色になります。さらに適当なところでクリックしてみると、反転表示が固定されます。

TableClothライブラリーをダウンロードする

上のサイトの右上にある[DownLoad Tablecloth]ボタンからダウンロードします。ダウンロードしたzipファイルを保存・解凍します。使うファイルは3つ

tablecloth.css
tablecloth.js
tr_back.gif

最後の[tr_back.gif]は、テーブルのバックグラウンドイメージで使われているだけなのでなくても構いません

使い方はヘッダに2行追加するだけ

TableClothを使いたいhtmlの<heder>~</heder>の間に下の2行を追加します。

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" 
media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

上の例ではhtmlファイルがあるフォルダーの一つ下に[tablecloth]フォルダーを作りその中に[tablecloth.js]と[tablecloth.css]入れる設定になっています。

htmlファイルとTableClothを同じフォルダーに入れる場合はこうなります。

<link href="tablecloth.css" rel="stylesheet" type="text/css" 
media="screen" />
<script type="text/javascript" src="tablecloth.js"></script>

行,列を反転させるには

ダウロードしたままTableClothを使うとこうなります。 縦方向は反転するのですが、横が反転しません。これを縦+横クロスして反転するようにするには、少しだけスクリプトを変更します

tablecloth.jsをテキストエディタで開いて17行目

var highlightRows = false;

となっている部分を

var highlightRows = true;

へ変更すれば縦横がクロスして反転表示されます。そのほか14行目,20行目のtrueをfalseへ変更すればスクリプトの動きが変わります。

TableCloth関連サイト

TableClothの実験ページ
スポンサーサイト

[タグ]
javascript css

[関連エントリー]
Comment
役に立つ情報ありがとうございました。
ところで、TableClothの実験ページの縦+横反転のリンクが誤っているみたいです。
修正をお願いします。
(URL) 2008/11/21 Fri 15:21 [ Edit ]












管理者にだけ表示を許可する

TrackBack
  1. 無料アクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。