icheck.js插件

1.下载icheck:http://icheck.fronteed.com/

2.把icheck.min.js和skins文件夹都放到自己的项目文件中

3.在html页面中引入icheck.min.js文件

4.总共有6种皮肤,每种皮肤又有10种颜色,样式预览在http://icheck.fronteed.com/中,看好了就在html页面中引入对应的css文件

5.在页面中加上js,只需要写出修改了默认值的参数:

<script>
   $(document).ready(function(){
    $('.checkbox input').iCheck({
      checkboxClass : 'icheckbox_square-aero',
    });
   })
</script>

附所有的参数及其默认值:

  1.  handle: '', 
  2.  checkboxClass: 'icheckbox', 
  3.  radioClass: 'iradio', 
  4.  checkedClass: 'checked', 
  5.  checkedCheckboxClass: '', 
  6.  checkedRadioClass: '', 
  7.  uncheckedClass: '', 
  8.  uncheckedCheckboxClass: '', 
  9.  uncheckedRadioClass: '', 
  10.  disabledClass: 'disabled', 
  11.  disabledCheckboxClass: '', 
  12.  disabledRadioClass: '', 
  13.  enabledClass: '', 
  14.  enabledCheckboxClass: '', 
  15.  enabledRadioClass: '', 
  16.  hoverClass: 'hover', 
  17.  focusClass: 'focus', 
  18.  activeClass: 'active', 
  19.  labelHover: true, 
  20.  labelHoverClass: 'hover', 
  21.  increaseArea: '', 
  22.  cursor: false, 
  23.  inheritClass: false, 
  24.  inheritID: false, 
  25.  insert: '' 

手机端的记得把aria属性改成true哈

6.如果想修改icheck位置的话,可以在页面内用js修改,如:

7.修改大小比较麻烦,因为icheck的各种状态变化是通过改变背景图片的位置来实现的,所以需要修改对应css文件中所有的数值,包括width、height、position和size

有人说还需要修改图片大小,我试了一下发现我的不用

应该一般都是不用的,因为没有改几个像素

可能pc端涉及到hover的时候需要修改。

8.还有人说可以用自己写的样式,而不是用插件,我没试过。。(我后来又试了试,步骤在改变checkbox的默认样式

转载于:https://www.cnblogs.com/wangchufang/p/8032665.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值