2019-07-24 神奇的iCheck-简单、实用
程序员文章站
2022-05-31 13:17:44
...
1.使用背景
项目中常用bootstrap作为前端开发框架，但是发现单选框和复选框的样式和Bootstrap
的样式不匹配，而且要调整单选框和复选框的样式挺麻烦的；
2.iCheck简介
iCheck官网介绍：
3.下载iCheck
在GitHub中下载 iCheck.下载完成之后，解压：iCheck目录结构如图所示：
4.使用iCheck
4.1 引入icheck.js文件
4.2 ICheck插件提供了几套非常好看的皮肤，供咱们选择。已Square皮肤为例，引入对应目录相应样式的css文件和图片，如我要引入红色样式red.css、red.png、aaa@qq.com
4.3 HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ichecktest.js"></script>
<script src="js/icheck.js"></script>
<link rel="stylesheet" href="skins/all.css" />
<link rel="stylesheet" href="skins/flat/red.css" />
<link rel="stylesheet" href="skins/square/red.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
div{
margin-left: 5%;
margin-top: 10px;
}
</style>
</head>
<body>
<h3>未引入icheck插件的单选框和复选框</h3>
<div>
<input type="checkbox" id="ACheckbox" name="oldCheckbox" value="A"/>篮球
<input type="checkbox" id="BCheckbox" name="oldCheckbox" value="B"/>足球
</div>
<div>
<input type="radio" name="oldsex" value="man"/>男
<input type="radio" id="oldsex" value="woman"/>女
</div>
<h3>复选框</h3>
<div><input type="checkbox" id="allResource" value="all"/>全选</div>
<div><input type="checkbox" name="newCheckbox" value="1"/>A</div>
<div><input type="checkbox" name="newCheckbox" value="2"/>B</div>
<div><input type="checkbox" name="newCheckbox" value="3"/>C</div>
<h3>单选框</h3>
<div>
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
</div>
</body>
</html>
4.4 JS代码
$(function(){
//checkbox初始化
$('input[name="newCheckbox"]').iCheck({
handle : 'checkbox',
checkboxClass : 'icheckbox_flat-red',
radioClass : 'iradio_flat-red'
})
//checkbox初始化
$("#allResource").iCheck({
handler:'checkbox',
checkboxClass:'icheckbox_flat-red'
})
//radio初始化
$("input[name='sex']").iCheck({
handler:'checkbox',
radioClass:'iradio_square-red'
})
//全选功能
$("#allResource").on("ifChanged",function(event){
var checkVal = $(this).prop("checked");
if(checkVal){
$("input[name='resource']").iCheck("check");
}else{
$("input[name='resource']").iCheck("uncheck");
}
})
})
4.5 效果：
4.6 拓展：iCheck的六套皮肤
Minimal skin
Square skin
)
Flat skin
)
Line skin
Polaris skin
)
Futurico skin
)
对应解压目录中skin目录下的六个文件夹
)
4.7 iCheck颜色
iCheck皮肤:
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 //紫色4.8 iCheck使用方法
$('input').iCheck('check'); //将输入框的状态设置为checked
$('input').iCheck('uncheck'); //移除 checked 状态
$('input').iCheck('toggle'); //toggle checked state
$('input').iCheck('disable'); //将输入框的状态设置为 disabled
$('input').iCheck('enable'); //移除 disabled 状态
$('input').iCheck('update'); //apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); //移除iCheck样式
4.9 iCheck基本使用方法
//基础使用方法
$('input[type='checkbox'],input[type='radio']').iCheck({
labelHover : false,
cursor : true,
checkboxClass : 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%'
}); 借鉴blogbootstrap的icheck插件的使用
上一篇： 我国的特色茶馆有哪些呢?