ICheck表单复选框、单选框控件美化插件

最新推荐文章于 2021-06-03 18:36:00 发布

lavendersue

最新推荐文章于 2021-06-03 18:36:00 发布

阅读量526

点赞数

分类专栏：常用插件文章标签： iCheck 表单美化插件

本文链接：https://blog.csdn.net/lavendersue/article/details/103399390

版权

iCheck是一个用于美化和增强HTML复选框及单选框的JavaScript插件，它在各种浏览器和设备上提供一致的体验，包括桌面和移动设备。具备多种自定义选项、事件和方法，支持触屏设备，且体积小巧。使用iCheck，可以通过简单的HTML和CSS定制样式，并能与原始输入框状态同步。

摘要由CSDN通过智能技术生成

作用：

渲染并美化当前页面的复选框或单选框
响应复选框或单选框的点击事件

特点：

在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备
支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统
方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)
体积小巧 — gzip压缩后只有1 kb
25 种参数用来定制复选框（checkbox）和单选按钮（radio button）
8 个回调事件用来监听输入框的状态
7个方法用来通过编程方式控制输入框的状态
能够将输入框的状态变化同步回原始输入框中，支持所有选择器

使用方式：

引入css文件：<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
引入js文件：<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>
编写html文件：<input type="checkbox" class="minimal" />
激活iCheck插件（即初始化iCheck样式效果等）:

$('input[type="checkbox"], input[type="radio"]').iCheck({
   
    checkboxClass: 'icheckbox_minimal-blue',
    radioClass   : 'iradio_minimal-blue'
});

用法：

基础用法：

$('input').iCheck({
    
  labelHover : false, 
  cursor : true, 
  checkboxClass : 'icheckbox_square-blue', 
  radioClass : 'iradio_square-blue', 
  increaseArea : '20%' 
}</