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

效果图 :


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

非常的小巧,使用起来也很简单:

1 $('#chkFirst').jCheckbox({
2     maxlength: 10,
3     onChange: function(e) {
4     window.console && console.log('value of %o is %s[checked=%s]'this, e.val(), e.attr('checked'));
5     }

6}
);

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

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

页面代码:

1<input type="checkbox" id="chkFirst" text="I am a checkbox" value="1" />

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

 

 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: 请确保包含此函数:

 

 1 String.prototype.cut = function(len) {
 2     var position = 0;
 3     var result = [];
 4     var tale = '';
 5     for (var i = 0; i < this.length; i++{
 6         if (position >= len) {
 7           tale = '';
 8           break;
 9         }

10         if (this.charCodeAt(i) > 255{
11           position += 2;
12           result.push(this.substr(i, 1));
13         }

14         else {
15           position++;
16           result.push(this.substr(i, 1));
17         }

18     }

19     return result.join(""+ tale;
20}
;

在线演示:live demo