icheck的使用
一、什么是icheck
就是用来美化单选框、复选框的。
二、如何使用
1、下载
到 github 下载。https://github.com/fronteed/icheck
下载完毕、解压、目录结构如下:
2、选皮肤
icheck有6种好看的皮肤、分别是极小的、正方形的、平滑的、线形的、北极星、未来。前面四种皮肤又都有10种不同的颜色。分别为黑、红、绿、蓝、青、灰、橘、黄、粉、紫。
我们可以点开demo\index.html文件进行预览、这里面在展现效果的同时也介绍了详细的用法。个人觉得前面三种皮肤较为常用。效果分别如下:
3、使用一种皮肤但多种颜色的文件配置
比如这里我们使用方形皮肤。
第一步,新建 icheck 文件夹、把 skins\square 文件夹和 icheck.min.js 放到 icheck 文件夹里。
第二步,打开 icheck\skins\square文件夹,把里面除了 _all.css 以后的所有css文件全部删除。因为我们这里是可以使用多种颜色的,这个_all.css就有全部的样式。
第三步,在需要的页面按顺序引入以下这三个文件。
<link rel="stylesheet" href="icheck/square/_all.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="icheck/icheck.min.js"></script>
第四步,启动icheck插件。
$('input[type=radio],input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-red', // 可以更改red换颜色
radioClass: 'iradio_square-red',
increaseArea: '20%' // optional
});
第五步,效果完成,如下:
4、使用一种皮肤一种颜色的文件配置
这种就比较简洁了,把多余的颜色文件都删了,比如我们使用方形的蓝色皮肤,具体使用方法和上面差不多,就是有如下区别,
第一步,相同
第二步,打开 icheck\skins\square文件夹,把里面除了 blue.css、blue.png、blue@2x.png 以外的所有文件全部删除。因为我们这里只需要蓝色。
第三步,在需要的页面按顺序引入以下这三个文件。
<link rel="stylesheet" href="icheck/square/blue.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="icheck/icheck.min.js"></script>
第四步,启动icheck插件。
$('input[type=radio],input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-blue', // 不可以更改颜色了
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
第五步,效果完成,如下:
三、icheck的一些回调
1、ifChanged
触发时机:选框状态改变时触发
$('input[type=checkbox]').on('ifChanged', function(obj){
console.log($(this).val()); // 获取该复选框的value值
console.log(obj.currentTarget.checked) // 获取该复选框当前状态是否选中
console.log('您更改了复选框的状态');
})
2、ifChecked
触发时机:选框选中时触发
$('input[type=checkbox').on('ifChecked', function(obj){
console.log($(this).val()); // 获取该复选框的value值
console.log('您选中了复选框');
})
3、ifUnchecked
触发时机:选框取消选中时触发
$('input[type=checkbox').on('ifUnchecked', function(obj){
console.log($(this).val()); // 获取该复选框的value值
console.log('您取消选中了复选框');
})
四、icheck以编程方式进行更改
1、将选框选中
$('input[type=checkbox]').iCheck('check');
2、将选框取消选中
$('input[type=checkbox]').iCheck('uncheck');
3、将选框的状态反向切换
$('input[type=checkbox]').iCheck('toggle');
4、将选框禁用
$('input[type=checkbox]').iCheck('disable');
5、将选框取消禁用
$('input[type=checkbox]').iCheck('enable');
五、提交时获取选中选框的值
$('button').on('click', function(){
$('input[type=checkbox]').each(function(){
if($(this).prop('checked')){
console.log($(this).val());
}
})
})
icheck的使用的更多相关文章
- iCheck.js
一.iCheck:http://www.bootcss.com/p/icheck/ 1.选择一个颜色主题,网上有,有了一个肤色主题,然后就是把这个肤色主题的css文件复制到iCheck文件夹里面 2. ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- iCheck表单美化插件使用方法详解(含参数、事件等)
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
- JQery icheck 插件
<script type="text/javascript"> $(document).ready(function(){ var callbacks_list = $ ...
- 优化checkbox和radio,类似Bootstrap中的iCheck
checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了. html结构:单选框为例,简单说明: 其 ...
- icheck.min.js 选中效果
遍历所有 checkbox 如果是选中的用 绿色 如果未选中用 灰色 //check控件属性 $('input').each(function() { var self = $(this); var ...
- icheck样式绑定与翻页保持
官方文档:http://icheck.fronteed.com/ 使用基本样式 $('input').iCheck({ checkboxClass : 'icheckbox_square-blue', ...
- icheck如何修改样式大小
icheck默认样式比较大,有需求调整checkbox大小. 1. 最简单的方法可用css3来实现,让整个模块层缩放,不兼容低版本浏览器. transform:scale(0.7,0.7) 2. ...
- jquery-插件iCheck 使用
这是一个兼容多种浏览器的插件 官网:http://icheck.fronteed.com/ 官方给出了很多的例子,我说一个使用的问题. 使用的时候,要放到window..load的外部. 页面html ...
- 期货大赛项目|六,iCheck漂亮的复选框
废话不多说,直接上图 对,还是上篇文章的图,这次我们不研究datatables,而是看这个复选框,比平常的复选框漂亮太多 看看我是如何实现的吧 插件叫iCheck 用法也简单 引入js和css $(& ...
随机推荐
- 在VUE中实现打印
1.安装 npm install vue-print-nb --save 2.在mian.js中引入 import Print from 'vue-print-nb' Vue.use(Print); ...
- html文档加载顺序简单理解
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- poj 1679 The Unique MST 判断最小生成树是否唯一(图论)
借用的是Kruskal的并查集,算法中的一点添加和改动. 通过判定其中有多少条可选的边,然后跟最小生成树所需边做比较,可选的边多于所选边,那么肯定方案不唯一. 如果不知道这个最小生成树的算法,还是先去 ...
- Excel 表格中根据某一列的值从另一个xls文件的对应sheet中查找包含其中一列的内容(有点拗口)
=VLOOKUP(C3&"*",INDIRECT("'[2008-2016年三地商务明细表.xls]"&L3&"年北京'!$D ...
- Could not parse mapping document from resource com/hs/model/StudentModel.hbm.xml
网上出现这个问题的 lei.hbm.xml配置写错的,文件头应该改为如下,并不是这个问题 <?xml version="1.0"?> <!DOCTYPE hibe ...
- yield和return
yield 是用于生成器.什么是生成器,你可以通俗的认为,在一个函数中,使用了yield来代替return的位置的函数,就是生成器.它不同于函数的使用方法是:函数使用return来进行返回值,每调用一 ...
- PyCharm常用技巧集合
PyCharm常用技巧集合 一.添加或者修改文件模板 File>settings>Editor>File and Code Templates>Python Script 你可 ...
- python 处理缺失数据
- 集训队日常训练20180525-DIV1
A.2805 N*M的图,每次浇水(X1,Y1)-(X2,Y2)围成的矩形,问最后有多少点被浇水了. 暴力. #include<bits/stdc++.h> using namespace ...
- 使用Cmder 安装 Composer 出现 "attempt to call a nil value"
原因: 不是这个原因,也不是那个原因,而是采用了中文路径, 把comder 整个搬到其他目录就行了