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
分享到:
相关推荐
标题中的"Colorize-effect_vb6effect_"似乎指的是一个基于Visual Basic 6(VB6)的特效程序,可能是一个能够给图像或者用户界面元素添加颜色调整效果的库或工具。在VB6中,开发人员可以利用GDI(Graphics Device ...
着色你的 go 输出 在处理堆栈跟踪(尤其是恐慌)时,需要很长时间才能找到属于您的代码的行。 我把它写成一个非常基本的着色器,我可以将测试套件等的输出通过管道传输到... | go-colorize-stack -packageName=influxd
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
**GCP Console Colorize CRX 插件详解** GCP Console Colorize CRX 是一个专为Google Cloud Platform(GCP)控制台设计的浏览器扩展程序。这个插件的主要功能是让用户能够自定义GCP控制台界面的颜色,以便于在多个...
着色控制台输出 colorize/colorize/0.1.1/colorize-0.1.1.pom
着色控制台输出 colorize/colorize/0.1.0/colorize-0.1.0.pom
npm install colorize-str 前景 使用大括号内的标准 html/css 颜色代码来设置背景颜色: var colorizeStr = require('colorize-str'); console.log(colorizeStr('{#0f0}SUCCESS: {#fff}yay!')); 您可以使用任何...
用于GradleHTML / CSS / JavaScript Web应用程序插件该插件不再维护。 使用可以直接从Gradle调用NodeJS任务,而无需使用此插件。 用于构建HTML / CSS / JavaScript Web应用程序的Gradle插件。 该插件添加了...
语言:English (United States) 根据日志类型为AWS Cloudwatch日志着色; 警告,错误,信息 轻松读取带有错误,警告,信息和调试颜色的Amazon Cloud ...欢迎贡献:https://github.com/yusufff/colorize-cloudwatch
用于生成热图的 jQuery 插件。 灵感来自 。 用法 $("table tbody td").colorize({}); 选项 min - 明确设置最负颜色的最小上限 max - 明确设置最正面颜色的最大上限 center - 明确定义中性值,默认为值的均值 可读 -...
QColorizeMixin QColorizeMixin QColorizeMixin是一个Vue混合库,用于使用Quasar Framework创建的组件。 仅适用于使用render功能的组件。 它不适用于SFC(单个文件组件)中找到的模板格式。 特征 ...
更改GCP控制台颜色 使用您喜欢的颜色着色GCP控制台标题。 该扩展使您可以直观地区分每个GCP项目。 e.x.在生产项目中将标题颜色更改为“红色”。 支持语言:English
VS Code Markdown语法 ... 语法测试结果存储在test/colorize-results ,该test/colorize-results从灯具自动生成。 要在VS Code中测试语法,请在VS Code调试器中选择“ Launch Extension配置并运行。
将存储~/.oh-my-zsh/custom/plugins到~/.oh-my-zsh/custom/plugins cd ~ /.oh-my-zsh/custom/pluginsgit clone https://github.com/horosgrisa/mysql-colorize 之后,mysql-colorize到您的oh-my-zsh插件数组。...
1. **解压并编译/安装**:首先,你需要解压`mysql-colorize-master`压缩包,然后根据提供的文档指示编译(如果需要)并安装到系统路径。 2. **配置**:根据个人喜好配置颜色方案和其他设置,这可能涉及到修改配置...
$ npm i node-colorize -g 用法 创建Colorize类的新实例: const colored = new Colorize ( ) ; 使用颜色方法在控制台中输出彩色文本: colored . green ( 'Hello world' ) ; 使用colored.styles中的随机样式: ...
轻松识别同一lambda事件日志的开始和结束。...如果您想做出贡献,请访问:https://github.com/ilhan-mstf/colorize_cloudwatch_logs发布日志:------------版本0.2.1-报告和错误行的字体大小为大胆。 支持语言:English
npm install regex-colorize --save 纱 yarn add regex-colorize 安装 npm import RegexColorize from 'regex-colorize' ; import 'regex-colorize/themes/default.css' // If you import a css file in your ...