TGCode

关注互联网技术

jQuery 插件之Checkbox

2021年1月13日   |   by tgcode

jquery.jcheckbox是基于jQuery 1.2.*开发的模拟checkbox插件，在任何系统环境下都可以显示出更为美观的UI效果。

效果图 :

%title插图%num

源码可以到此下载： jquery.jcheckbox.js

非常的小巧，使用起来也很简单：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1%title插图%num%title插图%num$(‘#chkFirst‘).jCheckbox(%title插图%num{
2%title插图%nummaxlength:10,
3%title插图%num%title插图%numonChange:function(e)%title插图%num{
4%title插图%numwindow.console&&console.log(‘valueof%ois%s[checked=%s]‘,this,e.val(),e.attr(‘checked‘));
5%title插图%num}
6%title插图%num});

此示例表示匹配名称为“chkFirst”的checkbox并对其美化。当其状态发生改变时(checked)触发onChange事件(参数e为实际checkbox对象)。

由于模拟checkbox与实际checkbox之间相关联(包括value,checked属性)，所以可以直接针对原checkbox取值(原checkbox被隐藏)。

页面代码：

<!–

Code highlighting produced by Actipro CtgcodeodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–tgcode>1%title插图%numinputtype=”checkbox”id=”chkFirst”text=”Iamacheckbox”value=”1″/>

那么当checkbox状态改变时可以在控制台中观察到结果：

%title插图%num

API说明：

normalcssName(String): 模拟checkbox的样式名称，默认为 ‘sp_xjCheckBox’,
hovercssName(String): 鼠标悬停时的样式名称，默认为’sp_xjCheckBox_H’,
checkedcssName(String): 被选中时的样式名称，默认为’sp_xjCheckBox_C’,
plugCss(Object): 附加到模拟checkbox的样式，例如{‘width’:300,height:20},
maxlength(Int): 字符切割长度，当text过长时进行切割(以‘…’结尾)，默认值为10,
onChange(Function): 状态发生改变时触发事件 。

如有不明白的地方可查看源码包中的demo。

ps: 请确保包含此函数：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1%title插图%num%title插图%numString.prototype.cut=function(len)%title插图%num{
2%title插图%numvar

t;>position=0;
3%title插图%numvarresult=[];
4%title插图%numvartale=”;
5%title插图%num%title插图%numfor(vari=0;ithis.length;i++)%title插图%num{
6%title插图%num%title插图%numif(position>=len)%title插图%num{
7%title插图%numtale=‘%title插图%num‘;
8%title插图%numbreak;
9%title插图%num}
10%title插图%num%title插图%numif(this.charCodeAt(i)>255)%title插图%num{
11%title插图%numposition+tgcode=2;
12%title插图%numresult.push(this.substr(i,1));
13%title插图%num}
14%title插图%num%title插图%numelse%title插图%num{
15%title插图%numposition++;
16%title插图%numresult.push(this.substr(i,1));
17%title插图%num}
18%title插图%num}
19%title插图%numreturnresult.join(“”)+tale;
20%title插图%num};

在线演示：live demo

相关推荐: 字符串转换成JSON的三种方式

　　采用Ajax的项目开发过程中，tgcode经常需要将JSON格式的字符串返回到前端，前端解析成JS对象（JSON ）。　　ECMA-262(E3) 中没有将JSON概念写到标准中，但在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JS…

Tags: , ,