基于bootstrap的选择框插件icheck
本文实例为大家分享了bootstrapicheck选择框插件，供大家参考，具体内容如下
icheck官网：http://www.bootcss.com/p/icheck/#skin-square
1.到官网下载Icheck压缩包。
2.解压后找到icheck.min.js,jquery.js,zepto.js以及skins文件夹，复制到自己的项目中
3.在项目中引用
<linkrel="stylesheet"href="icheck/skins/minimal/red.css"/> <scripttype="text/javascript"src="icheck/js/jquery.js"></script> <scripttype="text/javascript"src="icheck/js/icheck.min.js"></script>
4.写输入框代码
<inputtype="checkbox"> <inputtype="checkbox"checked> <inputtype="radio"name="iCheck"> <inputtype="radio"name="iCheck"checked>
5.初始化
$('input').iCheck({
checkboxClass:'icheckbox_minimal-red',
radioClass:'iradio_minimal-red',
increaseArea:'20%',//optional
labelHover:true,
});
以上是icheck的一个简单实战教程。接下来再具体介绍一下
1、选择你要使用的皮肤样式主题，共6个(在skins文件下)
flat,futurico,line,minimal,polaris,square
每个皮肤底下有好几个可以选择的颜色，例如：
Black—square.css
Red—red.css
Green—green.css
Blue—blue.css
Aero—aero.css
Grey—grey.css
Orange—orange.css
Yellow—yellow.css
Pink—pink.css
Purple—purple.css
2.例如选择square皮肤下的blue.css,复制skin/square文件夹下的到css文件夹下
<linkhref="css/square/blue.css"rel="stylesheet">
3.引入icheck.js
移动端引入：
<scriptsrc="js/zepto.js"></script>
<scriptsrc="js/icheck.min.js"></script>
PC端引入
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/icheck.min.js"></script>
4在页面添加以下代码
<body>
<inputtype="checkbox">
<inputtype="checkbox"checked>
<inputtype="radio"name="iCheck">
<inputtype="radio"name="iCheck"checked>
</body>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass:'icheckbox_square-blue',**//注意square和blue的对应关系**
radioClass:'iradio_square-blue',
increaseArea:'20%'//optional
});
});
</script>
导入的颜色样式与checkboxClass，radioClass要一一对应，否则不起作用
如：
<linkrel="stylesheet"href="icheck/skins/minimal/red.css"/>
对应的是
$('input').iCheck({
checkboxClass:'icheckbox_minimal-red',
radioClass:'iradio_minimal-red',
.........
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。