基于bootstrap 的选择框插件-icheck

最新推荐文章于 2022-01-07 15:35:53 发布

望道同学

最新推荐文章于 2022-01-07 15:35:53 发布

阅读量6.8k

点赞数

文章标签： bootstrap 插件

本文链接：https://blog.csdn.net/qq_26927285/article/details/53820157

版权

前端框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

icheck官网：http://www.bootcss.com/p/icheck/#skin-square

到官网下载Icheck压缩包。
解压后找到 icheck.min.js, jquery.js, zepto.js 以及skins文件夹，复制到自己的项目中
在项目中引用

<link rel="stylesheet"href="icheck/skins/minimal/red.css" />
<script type="text/javascript" src="icheck/js/jquery.js" ></script>
<script type="text/javascript"src="icheck/js/icheck.min.js" ></script>

4.写输入框代码

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="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文件夹下

<link href="css/square/blue.css" rel="stylesheet">

3.3 引入icheck.js

移动端引入：

<script src="js/zepto.js"></script>
<script src="js/icheck.min.js"></script>

PC端引入

<script src="js/jquery.js"></script>

<script src="js/icheck.min.js"></script>

4 在页面添加以下代码

<body>
<input type="checkbox">

<input type="checkbox" checked>

<input type="radio" name="iCheck">

<input type="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 要一一对应，否则不起作用
如：

<link rel="stylesheet" href="icheck/skins/minimal/red.css" /> 
对应的是
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    .........

  });

望道同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于bootstrap 的选择框插件-icheck

icheck官网：http://www.bootcss.com/p/icheck/#skin-square到官网下载Icheck压缩包。解压后找到 icheck.min.js, jquery.js, zepto.js 以及skins文件夹，复制到自己的项目中在项目中引用<link rel="stylesheet"href="icheck/skins/minimal/red.css" /><
复制链接

扫一扫