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: , ,