`
hegz
  • 浏览: 441657 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

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

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics