HTMLの表(TABLE)のセル(TD)に斜線を引くjavascriptライブラリ slash.js

HTMLで作成した表(TABLE)で斜線(主に空欄・記入禁止などを示すためのもの)を引こうと思ったら、そんなもの引けなかった…
そんな経験はありませんか?

従来、VMLを使う方法と画像を使う方法が知られていましたが、どちらも欠点があり、汎用的に使うことができるものではありませんでした。

・VML…W3C勧告として採用されておらず、WindowsIEのみ使用可能。Firefox等に移植性なし。
・画像…tdのサイズに合わせて斜線の画像を用意するので、サイト・ページごとに、斜線の必要なtdの数だけ画像を作成しなければならない。

そこで、複数のページ・サイトに導入可能(何度も同じものを作る必要なし)で、誰でも簡単に使えるものを作れないか?と思い、javascriptを利用したライブラリを作成してみました。
HTMLとCSSが多少わかる方なら誰でも使えるものになったと思います。

(作ってみてあまりに簡単に実現してしまったので、もしかして既に海外で同様のライブラリがあるかも?とも思うのですが、日本語環境で私が検索した範囲では見つからなかったので公開してみることにしました)

利用について(ライセンス)

無料でどなたでもお使いいただけます。商用利用ももちろんOKです。(prototype.jsに習い、MITライセンスとします)

依存PKGについて

prototype.jsを使用しています。(必要なメソッドの移植は現在検討中です。)

動作確認状況(2008.10.31現在)

○Win IE6
○Win IE7
○Win Firefox3
×Win Safari

*動作「×」のものの修正対応、私が確認できていないブラウザでの動作確認にご協力いただける方を募集中ですm(_ _)m

ダウンロード

ダウンロード(tar.gz 約30KB)

サンプル

*現在のところ、線の色はCSSで指定しているため、同一ページ内で色違いの斜線を描くことはできません。

サンプルその1(左上から右下)

サンプルその2(右上から左下)

使い方

1.こちらからダウンロードしたslashjsフォルダをサーバー上の適当な位置にアップロードしてください。
cssとjavascriptは別々のフォルダに入れてしまっても構いません。

2.斜線を描きたいテーブルを配置するHTML内に下記の記述を入れて下さい。
*ファイル名は変更して構いませんし、フォルダ名等は実際の環境に合わせて下さい。

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

3.斜線を描きたいセル(td)にwithSlashというクラスを付加します。

例:
<td class="withSlash"></td>

右上から左下に向かって斜線を付けたいときはslashRightというクラスも付加してください。

例:
<td class="withSlash slashRight"></td>

対象セルに、無関係な別のクラス名が付いても関係なく動きます。

例:
<td class="hogehoge withSlash slashRight"></td>

高度な?使い方

サンプル通りの動作では物足りない?方に…

描画される斜線の色を変えたい。

slash.css内にtd.slashに対する背景色指定(デフォルトは#333)があります。これをお好きな色に変更してください。

斜線の背景色を変えたい。

slash.css内にtable.slashTable tdにスタイルを指定する箇所があります。ここに背景色指定を追加してください。