icheck的使用

icheck 它主要针对的是checkbox和radio 的样式点击切换的效果,非常的方面切美观。

1、下载icheck包 地址:https://github.com/fronteed/iCheck

2、引用iCheck.js 和复制flat文件,里面有所以的样式  css.然后在html页面中·,引用你所想要引用颜色。<link rel="stylesheet" type="text/css" href="icheck/flat/blue.css">

3、加入js内容,

<script>
$(document).ready(function(){
$(‘.index_radio input‘).iCheck({
checkboxClass: ‘icheckbox_flat-blue‘,
radioClass: ‘iradio_flat-blue‘
});
})
</script>

4、注意:如果一一个页面需引用多个 icheck的样式。那么他们的input的name值一定要不一样,比如:第一组的name 为opp1.那么第二组就要为opp2. 不然,会默认为同一组的

时间: 2024-10-08 20:04:31

icheck的使用的相关文章

bootstrap iCheck插件 全选和获取value值的解决方法

在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click(     function(){         if(this.checked){             $("input[name='checkname']").each(function(){this.checked=true;});         }else{             $("input[

iCheck状态不能改变

1.1.1 现象 在网站UI中使用了Bootstrap的iCheck插件,调用.iCheck('uncheck')函数将checkbox设置为未选中状态,结果UI上没有任何变化,还是处于选中状态. 1.1.2 原因 经过跟踪iCheck源码发现,其在修改显示状态之前,先判断了对象的checked属性,如果该属性没有或者为False,则不会进行修改.而我们代码在调用.iCheck('uncheck')之前,刚好去掉了checked属性. 1.1.3 解决 将调用.iCheck('uncheck')

ICHECK

iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等系统 4.方便定制 - 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5.体积小巧 - gzip压缩后只有1 kb 6.25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 7.8 个回调事件 用来监听输入框的状态 8.7个方法 用来通过编程方式控制输入框

iCheck的全选和获取value

在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click( function(){ if(this.checked){ $("input[name='checkname']").each(function(){this.checked=true;}); }else{ $("input[name='checkname']").each(function(){thi

icheck如何修改样式大小

icheck默认样式比较大,有需求调整checkbox大小. 1. 最简单的方法可用css3来实现,让整个模块层缩放,不兼容低版本浏览器. transform:scale(0.7,0.7) 2. 为了更好的兼容,最好的解决方案: 修改icheck本身默认样式的 width / height 来实现, 虽然宽高改变了,但是背景图片大小依旧,所以多了一步步骤,修改图片大小.完成. .icheckbox_square-blue, .iradio_square-blue { width: 22px;  

iCheck .js各种各样的插件 fuck Javascript

http://www.bootcss.com/p/icheck/ 1.先看下网上下载的demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JQery icheck 插件

1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 var callbacks_list = $('.demo-callbacks'); 4 $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(even

优化checkbox和radio,类似Bootstrap中的iCheck

checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了.html结构:单选框为例,简单说明: 其中必需项包括:class="radio" 和 name="名称" <div class="radio" name="sex" value="boy"><ins></ins>&l

BootStrap iCheck插件全选与获取value值的解决方法

这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click( function(){ if(this.checked){ $("input[name='checkname']").each(function(){this.checked=tru

Yii2 —— 实现自己的iCheck资源包

1.1.1  基本封装 iCheck是配合bootstrap包使用的前端控件,用来美化radio和checkbox的显示样式的,根据前面的"资源管理"的说明,以及官网的文档,可以很方便的把iCheck组件用资源包封装起来,顺便熟悉一下Yii 2中资源包的使用方法: 1.创建iCheck资源包ICheckAssets.php: <?php    namespace backend\assets;    use yii\web\AssetBundle;    class ICheck