js插件---iCheck是⽤来做什么的
js插件---iCheck是⽤来做什么的
⼀、总结
⼀句话总结：25 种参数⽤来定制复选框（checkbox）和（radio button）
> 定制复选框定制单选按钮
1、iCheck常⽤的⽅法有哪些？
> (′input′).iCheck(′check′);('input').iCheck('uncheck'); (′input′).iCheck(′toggle′);('input').iCheck('disable'); (′input′).iCheck(′enable′);('input').iCheck('update');
$('input').iCheck('destroy');
使⽤⽅法：
(′input′).iCheck(′check′);//将输⼊框的状态设置为checked('input').iCheck('uncheck'); //移除 checked 状态
(′input′).iCheck(′toggle′);//togglecheckedstate('input').iCheck('disable'); //将输⼊框的状态设置为 disabled
(′input′).iCheck(′enable′);//移除disabled状态('input').iCheck('update'); //apply input changes, which were done outside the plugin $('input').iCheck('destroy'); //移除iCheck样式
2、iCheck⽪肤使⽤的注意事项是什么？
> 使⽤对应⽪肤要记得引⼊对应的css样式
使⽤对应⽪肤要记得引⼊对应的css样式
⽪肤
Black — minimal.css //⿊⾊
Red — red.css //红⾊
Green — green.css //绿⾊
Blue — blue.css //蓝⾊
Aero — aero.css //win7中的那种玻璃效果
Grey — grey.css //银灰⾊
Orange — orange.css //橙⾊
Yellow — yellow.css //
Pink — pink.css //粉红⾊
Purple — purple.css //紫⾊
（请⾃⾏下载这些⽪肤包）
（如果要引⼊相关⽪肤，则需引⼊：相关主题颜⾊.css⽂件）
3、如果想要在iCheck点击的时候做点什么，应该怎么⽤？
> ⽤iCheck的回调函数ifChecked
$('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
pe + ' callback');
});
4、如何改变iCheck控件的⼤⼩？
> 改变对应的css样式
.icheckbox_square-blue, .iradio_square-blue {
display: block;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(blue.png) no-repeat;
border: none;
cursor: pointer;
}
⼆、iCheck表单美化插件使⽤⽅法详解（含参数、事件等）iCheck
特⾊：
1、在不同(包括+)和设备上都有相同的表现 — 包括桌⾯和移动设备
2、⽀持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统
4、⽅便定制 — ⽤HTML 和 CSS 即可为其设置样式 (多套⽪肤)
5、体积⼩巧 — gzip压缩后只有1 kb
6、25 种参数⽤来定制复选框（checkbox）和（radio button）
7、8 个回调事件⽤来监听输⼊框的状态
8、7个⽅法⽤来通过编程⽅式控制输⼊框的状态
9、能够将输⼊框的状态变化同步回原始输⼊框中，⽀持所有选择器
iCheck插件表单美化效果图如何用css美化表单
使⽤⽅法：
01. $('input').iCheck('check'); //将输⼊框的状态设置为checked
02. $('input').iCheck('uncheck'); //移除 checked 状态
03. $('input').iCheck('toggle'); //toggle checked state
04. $('input').iCheck('disable'); //将输⼊框的状态设置为 disabled
05. $('input').iCheck('enable'); //移除 disabled 状态
06. $('input').iCheck('update'); //apply input changes, which were done outside the plugin
07. $('input').iCheck('destroy'); //移除iCheck样式
调⽤iCheck时，只需要将修改了默认值的参数列出来即可：
01. //基础使⽤⽅法
02. $('input').iCheck({
03. labelHover : false,
04. cursor : true,
05. checkboxClass : 'icheckbox_square-blue',
06. radioClass : 'iradio_square-blue',
07. increaseArea : '20%'
08. });
下⾯是及其默认值：
01. {
02. handle: '',
03. checkboxClass: 'icheckbox',
04. radioClass: 'iradio',
05. checkedClass: 'checked',
06. checkedCheckboxClass: '',
07. checkedRadioClass: '',
08. uncheckedClass: '',
09. uncheckedCheckboxClass: '',
10. uncheckedRadioClass: '',
11. disabledClass: 'disabled',
12. disabledCheckboxClass: '',
13. disabledRadioClass: '',
14. enabledClass: '',
15. enabledCheckboxClass: '',
16. enabledRadioClass: '',
17. hoverClass: 'hover',
18. focusClass: 'focus',
19. activeClass: 'active',
20. labelHover: true,
21. labelHoverClass: 'hover',
22. increaseArea: '',
23. cursor: false,
24. inheritClass: false,
25. inheritID: false,
26. insert: ''
27. }
我们可以对上⾯列出的任何class重置样式
⽪肤
Black — minimal.css //⿊⾊
Red — red.css //红⾊
Green — green.css //绿⾊
Blue — blue.css //蓝⾊
Aero — aero.css //win7中的那种玻璃效果
Grey — grey.css //银灰⾊
Orange — orange.css //橙⾊
Yellow — yellow.css //
Pink — pink.css //粉红⾊
Purple — purple.css //紫⾊
（请⾃⾏下载这些⽪肤包）
初始化
⾸先，引⼊jQuery库⽂件
其次，引⼊jquery.icheck.js插件⽂件
（如果要引⼊相关⽪肤，则需引⼊：相关主题颜⾊.css⽂件）
事件
iCheck⽀持所有选择器（selectors），并且只针对和单选radio按钮起作⽤
iCheck提供了⼤量回调事件，都可以⽤来监听
事件名称使⽤时机
ifClicked⽤户点击了⾃定义的输⼊框或与其相关联的label
ifChanged输⼊框的 checked 或 disabled 状态改变了
ifChecked输⼊框的状态变为 checked
ifUnchecked checked 状态被移除
ifDisabled输⼊框状态变为 disabled
ifEnabled disabled 状态被移除
ifCreated输⼊框被应⽤了iCheck样式
ifDestroyed iCheck样式被移除
使⽤on()⽅法绑定事件：
01. $('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
02. pe + ' callback');
03. });
bootstrap iCheck中的radio和checkbox的⼤⼩可以调整吗？
01. .icheckbox_square-blue, .iradio_square-blue {
02. display: block;
03. margin: 0;
04. padding: 0;
05. width: 22px;
06. height: 22px;
07. background: url(blue.png) no-repeat;
08. border: none;
09. cursor: pointer;
10. }
如果要调整icheck的radio或checkbox样式，通过上⾯的css修改和height，同时修改blue.png图⽚对应的尺⼨。
发表评论