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
演示頁面: