美化checkbox _知识经验

【美化checkbox】

文章插图
伊切克
特点:
1.在不同的浏览器(包括ie6+)和设备上的表现是一样的& mdash包括桌面和移动设备。
2.支持触摸设备& mdashIOS、Android、黑莓、Windows Phone等系统。
4.方便定制& mdash可以用HTML和CSS(多种皮肤)进行样式化。
5.小尺寸& mdashGzip压缩后只有1 kb 。
6.25个参数用于定制复选框和单选按钮。
7.八个回调事件用于监控输入框的状态。
8.通过编程使用七种方法来控制输入框的状态。
9.它可以将输入框的状态变化同步回原来的输入框，并支持所有的选择器。

iCheck插件表单美化效果图
如何使用iCheck:
$('input').iCheck('check');//将输入框的状态设置为checked$('input').iCheck('uncheck');//移除checked状态$('input').iCheck('toggle');//togglecheckedstate$('input').iCheck('disable');//将输入框的状态设置为disabled$('input').iCheck('enable');//移除disabled状态$('input').iCheck('update');//applyinputchanges,whichweredoneoutsidetheplugin$('input').iCheck('destroy');//移除iCheck样式当调用iCheck时，您只需要列出已经修改了默认值的参数:
//基础使用方法$('input').iCheck({labelHover:false,cursor:true,checkboxClass:'icheckbox_square-blue',radioClass:'iradio_square-blue',increaseArea:'20%'});以下是参数及其默认值的列表:
{handle:'',checkboxClass:'icheckbox',radioClass:'iradio',checkedClass:'checked',checkedCheckboxClass:'',checkedRadioClass:'',uncheckedClass:'',uncheckedCheckboxClass:'',uncheckedRadioClass:'',disabledClass:'disabled',disabledCheckboxClass:'',disabledRadioClass:'',enabledClass:'',enabledCheckboxClass:'',enabledRadioClass:'',hoverClass:'hover',focusClass:'focus',activeClass:'active',labelHover:true,labelHoverClass:'hover',increaseArea:'',cursor:false,inheritClass:false,inheritID:false,insert:''}我们可以为上面列出的任何类重置样式。借助iCheck定制图标的效果:
ICheck皮肤
黑色& mdashMinimal.css // black
红色& mdashRed.css // red
绿色& mdashGreen.css //绿色
蓝色& mdashBlue.css //蓝色
Aero & mdashaero.css //win7中的玻璃效果。
灰色& mdashGrey.css //银灰色
橙色& mdashOrange.css //橙色
黄色& mdashYellow.css //黄色
粉色& mdashPink.css // pink
紫色& mdash紫色. css //紫色
(请自行下载这些皮肤包。)
I检查初始化
首先，介绍jQuery库文件。
其次，介绍jquery.icheck.js插件文件。
(如果要导入相关皮肤，需要导入:相关主题颜色。css文件)
ICheck回调事件
ICheck支持所有选择器，并且仅适用于复选框和单选按钮。
ICheck提供了大量的回调事件，可以用来监听change事件。

事件名称使用时机ifClicked 用户点击了自定义的输入框或与其相关联的labelifChanged 输入框的 checked 或 disabled 状态改变了ifChecked 输入框的状态变为 checkedifUnchecked checked 状态被移除ifDisabled 输入框状态变为 disabledifEnabled disabled 状态被移除ifCreated 输入框被应用了iCheck样式ifDestroyed iCheck样式被移除使用on()方法绑定事件:
$('input').on('ifChecked',function(event){//ifCreated事件应该在插件初始化之前绑定alert(event.type+'callback');});bootstrap iCheck中单选和复选框的大小可以调整吗？
.icheckbox_square-blue,.iradio_square-blue{display:block;margin:0;padding:0;width:22px;height:22px;background:url(/imgs/)no-repeat;border:none;cursor:pointer;}如果要调整icheck的单选或复选框样式，通过上面的css修改宽度和高度，同时修改/imgs/图片相应的大小。
ICheck插件下载(托管在github上，无法下载请从我的百度云盘下载iCheck插件包) 。
以上解释了checkbox的美化。这篇文章已经分享到这里了，希望对大家有所帮助。