• 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的默认样式

  • 相关阅读:
    原型模式——浅复制与深复制
    初识Java反射
    建造者模式
    利用事件委托弥补观察者模式不足
    利用Java提供的Observer接口和Observable类实现观察者模式
    观察者模式
    再说单例模式的线程安全问题
    组合模式
    MyBatis3入门
    [Swift]LeetCode1216. 验证回文字符串 III | Valid Palindrome III
  • 原文地址:https://www.cnblogs.com/wangchufang/p/8032665.html
Copyright © 2020-2023  润新知