WordPressで使いたいJAVAスクリプト「tablecloth」

tablecloth

見た目のさることながら、動きも素晴しい「tablecloth」という表をきれいに表示させるスクリプト。
jQueryでもないし、mootoolsでもないのですが、ホバーやクリック時に色が変化したり、1列おきに色を代えるなど、簡単な設定で表が見違えるほどキレイに仕上がります。
使い方として、商品比較などに使うとよろしいのではないかと思います。

さっそく設置方法の手順を忘れないよう、以下にまとめておくことにします。

スクリプトフォルダ構成の変更

このスクリプトは、解凍してみると比較的簡単な構成となっていますが、ひとまとめに設置しやすいように以下の構成に変更しておきます。

当初(解凍時)

  • tablecloth
    • _notes
    • tablecloth.css
    • tablecloth.js
    • tr_back.gif

修正(変更後)

  • tablecloth
    • css
      • tablecloth.css
    • images
      • tablecloth
        • tr_back.gif
    • js
      • tablecloth.js

ファイルの修正

基本的に、デフォルトでの利用の場合は必要ないですが、下記を部分を変更することで、違った表示方法となります。
ちなみにデフォルトでは、列(縦)部分のみ色が変化する設定になっています。

jsフォルダの中に、「tablecloth.js」の// CONFIGとなっているところ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	// CONFIG 
 
	// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
	var highlightCols = true;
 
	// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
	var highlightRows = false;	
 
	// if set to true then click on a table sell will select row or column based on config
	var selectable = true;
 
	// this function is called when 
	// add your own code if you want to add action 
	// function receives object that has been clicked 
	this.clickAction = function(obj){
		//alert(obj.innerHTML);
 
	};
 
	// END CONFIG (do not edit below this line)

「highlightCols = true or false」 の所が「行」
「highlightRows = true or false」 が「列」
に該当します。
trueにするとマウスで選択したときに反映されます。逆にfalseにすると反映しません。
最後の「selectable」がマウスで押すと、行と列それぞれ設定した部分が選択できます。

サーバーへのアップロード

スクリプトの設置場所に関する記事を書きましたので、そちらをご覧下さい。
WordPressにおけるJavaScriptの設置場所について

まとめとして

テーブルを整形するプラグインとして、「jQuery-tablesorter」があります。
使い分けを考えていたのですが、cssがぶつかってしまうので、今は違った方法で表示させています。

Error: Suspended

関連記事:

Tags: , ,

コメントする