skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

表を彩るjavascript「jQuery Grid Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

テーブルで作成した表は項目が多くなると見づらくなります。
また横幅が限られる環境では2行に渡ってしまったり、フォントサイズを小さくしなければいけません。
jQuery Grid Pluginは項目の幅をスライドできたり、行ごとの色をスタライプ状に変更したり、クリック／ダブルクリック時にも色を変化させられます。

使用方法
jQuery Grid Pluginからjquery.grid.core.jsをjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.grid.core.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var t=$("#id名");
t.grid({
navigate:{
maintainSelection:false
},
scroll:{
width:"600", //横幅
height:"300", //高さ
colWidths:[200,200,200]　　//項目の幅
},
stripe:true, //ストライプ
columnResize:true //項目のスライド
});
});
</script>
またストライプの色やクリック時の色はCSSで指定します。
.selected{background-color:limegreen !important;}
.activated{background-color:tomato !important;}
.even {background-color:#efefef}
.odd {background-color:#cde}
#test thead tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test tfoot tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test{
border-left: 1px solid #CBC7B8;
border-right: 1px solid #CBC7B8;
}
最後にtableで作成した表にid名を付与すれば完成です。
表を彩るjavascript「jQuery Grid Plugin」サンプル

記事作成：2007年12月13日

前の記事：スライドするパネルを作成するjavascript「jQuery Sliding Panels」
次の記事：Yahoo!アドパートナーテスト