Colorize - jQuery表格插件

Colorize是一個用來增加HTML表格行背景色交互的jQuery插件,鼠標懸停時行/列高亮,點擊鼠標時行/列變色,可以用來對多行(多列)表格按要求進行變色,再次鼠標點擊時將恢復行/列原來背景色。

 

如何使用?


使用默認選項(行變色)

$('#yourTableId').colorize() ;

 

可選參數:

altColor: 行背景交互色。默認爲 '#ECF6FC', 設置爲 'none' 則不使用背景交互色。
bgColor: 背景色(默認背景色爲白色)。
hoverColor: 當鼠標在行上懸停時的背景色。默認爲 '#BCD4EC'。
hoverClass:mouseover樣式類;hoverColor屬性優先。
hiliteColor:行高亮色。默認爲 'yellow',設置爲 'none' 時關閉高亮。
hiliteClass:行或列高亮時使用的樣式類,當設置了hiliteColor時被優先使用。
columns:最新版本中不贊成使用,被click和hover選項代替。
hover - 設置mouseover特性,可使用如下值:'row'、'column'、'cross' 。默認值爲 'row'。
click - 設置鼠標點擊時的高亮選項,可用值:'row'、'column'、 'cross'。當設置爲 'row',點擊時行高亮;當設置爲 'column',點擊時列高亮;當設置爲 'cross',點擊時行和列同時高亮。默認值爲 'row'。
oneClick:true/false - 每次只允許一行或一列高亮,當點擊新行/新列時取消當前高亮。默認爲false。
banColumns:[ ]- 防止某些列點擊時高亮,還有鼠標懸停時也一樣。可提交一個列數組作爲參數,當使用'last'值時最後一列不能高亮。
banRows:[ ]- 防止某些行高亮,可提交一個行數組作爲參數。
banDataClick:true/false - 如果爲true,你只能點擊表頭行。默認爲爲false。
ignoreHeaders:true/false - 如果爲true,表頭行不變色(沒有斑馬線)。默認爲true。
nested:true/false-默認爲false。如果一個表中嵌套有表格,使用它可獲得一致的斑馬線。
 

示例:

 

參數順序不重要,因此無須按順序排列。

$('#yourTableId').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red'});
$('#yourTableId').colorize({ oneClick:true});
$('#yourTableId').colorize({hover='column', click='column', banColumns :[0,1]});
$('#yourTableId').colorize({hover='cross', click='column'});
$('#yourTableId').colorize({ hiliteClass:'myStyle'});

 

不使用高亮:

$('#yourTableId').colorize( { hiliteColor:'none' } );

 

下載頁面:

 

http://franca.exofire.net/jq/colorize

 

演示頁面:

 

演示1     演示2

 

 

發佈了22 篇原創文章 · 獲贊 1 · 訪問量 6319
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章