見た目のさることながら、動きも素晴しい「tablecloth」という表をきれいに表示させるスクリプト。
jQueryでもないし、mootoolsでもないのですが、ホバーやクリック時に色が変化したり、１列おきに色を代えるなど、簡単な設定で表が見違えるほどキレイに仕上がります。
使い方として、商品比較などに使うとよろしいのではないかと思います。
さっそく設置方法の手順を忘れないよう、以下にまとめておくことにします。
スクリプトフォルダ構成の変更
このスクリプトは、解凍してみると比較的簡単な構成となっていますが、ひとまとめに設置しやすいように以下の構成に変更しておきます。
当初（解凍時）
- tablecloth
- _notes
- tablecloth.css
- tablecloth.js
- tr_back.gif
修正（変更後）
- tablecloth
- css
- tablecloth.css
- images
- tablecloth
- tr_back.gif
- tablecloth
- js
- tablecloth.js
- css
ファイルの修正
基本的に、デフォルトでの利用の場合は必要ないですが、下記を部分を変更することで、違った表示方法となります。
ちなみにデフォルトでは、列（縦）部分のみ色が変化する設定になっています。
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がぶつかってしまうので、今は違った方法で表示させています。
送料無料！フランス最高峰ジャガード織の老舗ガルニエ・ティエボーミルカラー ソルベ テーブルクロス（コーティング有り）【smtb-k】【w4】
サイズ175×250cm材質コットン100％画像をクリックしていただければ拡大画像がご覧できます。色違いはコチラ他のシリーズはコチラから撥水アクリルコーティング...
販売価格： 42,000 円 (2012/5/20 16:05 更新)
販売店舗： 工房 百の手
関連記事:
- WordPressで使いたいJAVAスクリプト「jQuery plugin:Treeview」
- WordPressで使いたいJAVAスクリプト「jQuery:Tabs」
- WordPressで使いたいJAVAスクリプト「jQuery:ToggleElements」
- WordPressプラグインではないJAVAスクリプトを導入するメモ
- WordPressプラグインではないJAVAスクリプトの設置場所メモ
Tags: JavaScriptライブラリ, tablecloth, WordPress