jQuery 插件之Checkbox
2021年1月13日 | by tgcode
jquery.jcheckbox是基于jQuery 1.2.*开发的模拟checkbox插件,在任何系统环境下都可以显示出更为美观的UI效果。
效果图 :
源码可以到此下载: jquery.jcheckbox.js
非常的小巧,使用起来也很简单:
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
–>1$(‘#chkFirst‘).jCheckbox(
{
2maxlength:10,
3onChange:function(e)
{
4window.console&&console.log(‘valueof%ois%s[checked=%s]‘,this,e.val(),e.attr(‘checked‘));
5}
6});
此示例表示匹配名称为“chkFirst”的checkbox并对其美化。当其状态发生改变时(checked)触发onChange事件(参数e为实际checkbox对象)。
由于模拟checkbox与实际checkbox之间相关联(包括value,checked属性),所以可以直接针对原checkbox取值(原checkbox被隐藏)。
页面代码:
Code highlighting produced by Actipro CtgcodeodeHighlighter (freeware)
http://www.CodeHighlighter.com/
–tgcode>1inputtype=”checkbox”id=”chkFirst”text=”Iamacheckbox”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: 请确保包含此函数:
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
–>1String.prototype.cut=function(len)
{
2var
t;>position=0;
3varresult=[];
4vartale=”;
5for(vari=0;ithis.length;i++)
{
6if(position>=len)
{
7tale=‘
‘;
8break;
9}
10if(this.charCodeAt(i)>255)
{
11position+tgcode=2;
12result.push(this.substr(i,1));
13}
14else
{
15position++;
16result.push(this.substr(i,1));
17}
18}
19returnresult.join(“”)+tale;
20};
在线演示:live demo
采用Ajax的项目开发过程中,tgcode经常需要将JSON格式的字符串返回到前端,前端解析成JS对象(JSON )。 ECMA-262(E3) 中没有将JSON概念写到标准中,但在 ECMA-262(E5) 中JSON的概念被正式引入了,包括全局的JS…