首页 > 其他分享 >BootStrapt iCheck表单美化插件使用方法

BootStrapt iCheck表单美化插件使用方法

时间:2023-10-11 18:14:27浏览次数:115  
标签:blue 插件 checked iCheck 输入框 BootStrapt input css

一、特色:

1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备

2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统

4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)

5、体积小巧 — gzip压缩后只有1 kb

6、25 种参数 用来定制复选框(checkbox)和单选按钮(radio button)

7、8 个回调事件 用来监听输入框的状态

8、7个方法 用来通过编程方式控制输入框的状态

9、能够将输入框的状态变化同步回原始输入框中, 支持所有选择器

 

二、使用方法:
1 $('input').iCheck('check');   //将输入框的状态设置为checked 
2 $('input').iCheck('uncheck'); //移除 checked 状态 
3 $('input').iCheck('toggle');  //toggle checked state 
4 $('input').iCheck('disable'); //将输入框的状态设置为 disabled 
5 $('input').iCheck('enable');  //移除 disabled 状态 
6 $('input').iCheck('update');  //apply input changes, which were done outside the plugin 
7 $('input').iCheck('destroy'); //移除iCheck样式 

调用iCheck时,只需要将修改了默认值的参数列出来即可   //基础使用方法 

$('input').iCheck({ 

 labelHover : false, 

 cursor : true, 

 checkboxClass : 'icheckbox_square-blue', 

 radioClass : 'iradio_square-blue', 

 increaseArea : '20%' 

}); 

 

三、参数列表及其默认值:

 
{ 
 handle: '', 
 checkboxClass: 'icheckbox', 
 radioClass: 'iradio', 
 checkedClass: 'checked', 
 checkedCheckboxClass: '', 
 checkedRadioClass: '', 
 uncheckedClass: '', 
 uncheckedCheckboxClass: '', 
 uncheckedRadioClass: '', 
 disabledClass: 'disabled', 
 disabledCheckboxClass: '', 
 disabledRadioClass: '', 
 enabledClass: '', 
 enabledCheckboxClass: '', 
 enabledRadioClass: '', 
 hoverClass: 'hover', 
 focusClass: 'focus', 
 activeClass: 'active', 
 labelHover: true, 
 labelHoverClass: 'hover', 
 increaseArea: '', 
 cursor: false, 
 inheritClass: false, 
 inheritID: false, 
 insert: '' 
} 
我们可以对上面列出的任何class重置样式

 

 

四、皮肤

Black — minimal.css  //黑色

Red — red.css  //红色

Green — green.css  //绿色

Blue — blue.css  //蓝色

Aero — aero.css //win7中的那种玻璃效果

Grey — grey.css  //银灰色

Orange — orange.css  //橙色

Yellow — yellow.css  //黄色

Pink — pink.css  //粉红色

Purple — purple.css  //紫色

(请自行下载这些皮肤包)

 

 

五、初始化

首先,引入jQuery库文件

其次,引入jquery.icheck.js插件文件

(如果要引入相关皮肤,则需引入:相关主题颜色.css文件)

 

  六、回调事件 iCheck支持所有选择器(selectors),并且只针对复选框checkbox和单选radio按钮起作用 iCheck提供了大量回调事件,都可以用来监听change事件
 
 事件名称 使用时机
 ifClicked  用户点击了自定义的输入框或与其相关联的label
 ifChanged  输入框的 checked 或 disabled 状态改变了
 ifChecked  输入框的状态变为 checked
 ifUnchecked  checked 状态被移除
 ifDisabled  输入框状态变为 disabled
 ifEnabled  disabled 状态被移除
 ifCreated  输入框被应用了iCheck样式
 ifDestroyed  iCheck样式被移除

 使用on()方法绑定事件:

$('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
  alert(event.type + ' callback'); 
}); 

 

bootstrap iCheck中的radio和checkbox的大小可以调整吗?

icheckbox_square-blue, .iradio_square-blue { 
  display: block; 
  margin: 0; 
  padding: 0; 
  width: 22px; 
  height: 22px; 
  background: url(blue.png) no-repeat; 
  border: none; 
  cursor: pointer; 
} 

 

如果要调整icheck的radio或checkbox样式,通过上面的css修改width和height,同时修改blue.png图片对应的尺寸。

 

七、全选  反选

<label>1<input type="checkbox" name="check1"></label>  

<label>2<input type="checkbox" name="check1" ></label>

 <label for="checkall">全选<input type="checkbox" id="checkall"></label>

 <label for="checkrev">反选<input type="checkbox" id="checkrev"></label

$(function(){  
    $("#checkall").click(function(){   
        //第一种方法 全选全不选  
        if(this.checked){   
            $("input[name='check1']:checkbox").attr('checked',true);   
        }else{   
            $("input[name='check1']:checkbox").attr('checked',false);    
        } */   
        //第二种方法 全选全不选   
        $('[name=check1]:checkbox').attr('checked',this.checked);//checked为true时为默认显示的状态   
    });  
    $("#checkrev").click(function(){  
        //实现反选功能  
        $('[name=check1]:checkbox').each(function(){  
            this.checked=!this.checked;  
        });  
    });   
});  
判断是 否选中

if($('#minimal-radio-2').is(':checked')) {
   
}

 

参考文档:https://www.cnblogs.com/chongtao/p/5846108.html

标签:blue,插件,checked,iCheck,输入框,BootStrapt,input,css
From: https://www.cnblogs.com/Leeblog200814/p/17757862.html

相关文章

  • 如何将海康、大华、TP等监控摄像头、硬盘录像机的监控视频集成到网页中无插件播放,实现
    方法介绍今天我们介绍一个开放的监控接入平台NTVGBS,可以轻松实现将监控摄像头或录像机的监控视频信号集成到网页或APP中,并提供云台控制、录像回看等高级功能。NTVGBS是一款非常规范好用的开放监控平台,平台支持GB28181国标、RTMP/RTSP直播推送和ONVIF等开放规范,如果您有摄像头或......
  • springboot整合mybatis中使用分页插件 getTotal为0的原因(本人出现的问题)
      本人将实现分页插件---pagehelper.startpage()放到 ---page<Employee>这条语句的前面就获得到了total的值 ......
  • iOS原生集成Cordova后再集成插件流程
    假设你已经在原生工程(取名native)上成功集成Cordova,参考官方文档往项目再集成插件步骤如下使用Cordova创建一个新iOS项目(取名demo)在demo里面安装你想要的插件,以device为例cordovapluginaddcordova-plugin-device这时我们发现demo工程里成功安装了device插件,接下来我......
  • fullPage插件
    1.简介1.1关于fullPage.jsfullPage.js是一个基于jQuery的插件,它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次1.2兼容性fullPage.js兼容所有的......
  • vue上传视频插件
    视频作为一种信息表达方式,越来越受到人们的关注和喜爱。近年来,随着移动互联网的普及,手机、平板电脑等设备可以随时随地观看视频。在开发网站或移动应用时,上传和展示视频成为一项不可或缺的功能。Vue作为一种现代化JavaScript框架,提供了丰富的开发工具和插件,其中视频上传插件是Vue......
  • 解决 golang 中 grep console 插件不生效问题
    日志多了以后不好找,idea中的神奇grepconsole在goland竟然不好使了,一番查找下,找到了一个解决方案cmd+shift+a找到Registry找到go.run.processes.with.pty,改为false大功告成原贴:https://github.com/krasa/GrepConsole/issues/175......
  • Notepad++插件安装
    在线插件如果无法下载,一般是网路问题,毕竟连的是国外服务器。下载完成后安装失败,这时下载的文件可以在回收站找到,从回收站剪切出来放到Notepad++安装目录下的plugins文件夹下。将解压缩出来的文件夹重命名,与其内的.dll文件名称一致。手动安装插件完成。......
  • 金蝶云星空插件项目新建类不写public修饰符的问题
     当类不屑修饰符时,生成dll后,bos平台注册时无法显示刚创建的类,也就无法选择。如下图:  结论:声明命名空间、类,前面不加限制访问修饰符时,默认访问权限为internal——访问仅限于当前程序集。 添加public修饰符后, 如图所见,可以选择到我们的目的类了。 完美。......
  • MAC Office 插件异常 Run-time error '53'
    问题描述:Office版本和Mathtype版本不兼容,卸载mathtype后,加载项无法加载出现如下报错:Filenotfound:/Library/ApplicationSupport/Microsoft/Office365/UserContent.localized/Startup.localized/PowerPoint/MathType.bundle/Contents/MacOS/MTMacOLEshim.解决方法问题处在......
  • 超好用的IDEA插件推荐!
    大家好,Apipost最新推出IDEA插件V2版本!V2版本主要是Apipost符合更多用户的需求而推出,支持在插件中获取token、支持代码完成后在插件中进行API调试,同时也保留了1.0版本部分功能如上传选择目录功能等。V1版本还会继续保留开源,方便各位进行自创魔改。V2版本目前已上架至IDEA插件......