基于bootstrap的选择框插件icheck


Posted in Javascript onDecember 23, 2016

本文实例为大家分享了bootstrap icheck选择框插件,供大家参考,具体内容如下

icheck官网:http://www.bootcss.com/p/icheck/#skin-square

1.到官网下载Icheck压缩包。

2.解压后找到 icheck.min.js, jquery.js, zepto.js 以及skins文件夹,复制到自己的项目中

3.在项目中引用

<link rel="stylesheet"href="icheck/skins/minimal/red.css" />
<script type="text/javascript" src="icheck/js/jquery.js" ></script>
<script type="text/javascript"src="icheck/js/icheck.min.js" ></script>

4.写输入框代码

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

5.初始化

$('input').iCheck({
  checkboxClass: 'icheckbox_minimal-red',
  radioClass: 'iradio_minimal-red',
  increaseArea: '20%', // optional
   labelHover: true,
 });

以上是icheck的一个简单实战教程。接下来再具体介绍一下

1、选择你要使用的皮肤样式主题,共6个(在skins文件下)
flat, futurico, line, minimal, polaris, square
每个皮肤底下有好几个可以选择的颜色,例如:

Black — square.css

Red — red.css

Green — green.css

Blue — blue.css

Aero — aero.css

Grey — grey.css

Orange — orange.css

Yellow — yellow.css

Pink — pink.css

Purple — purple.css

2 .例如选择square皮肤下的blue.css,复制 skin/square文件夹下的到css文件夹下

<link href="css/square/blue.css" rel="stylesheet">

3.引入icheck.js

移动端引入:

<script src="js/zepto.js"></script>
<script src="js/icheck.min.js"></script>

PC端引入

<script src="js/jquery.js"></script>

<script src="js/icheck.min.js"></script>

4 在页面添加以下代码

<body>
<input type="checkbox">

<input type="checkbox" checked>

<input type="radio" name="iCheck">

<input type="radio" name="iCheck" checked>
</body>
<script>

$(document).ready(function(){
 $('input').iCheck({
  checkboxClass: 'icheckbox_square-blue', **// 注意square和blue的对应关系**
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional

 });

});

</script>

导入的颜色样式与 checkboxClass, radioClass 要一一对应,否则不起作用
如:

<link rel="stylesheet" href="icheck/skins/minimal/red.css" />
对应的是

$('input').iCheck({
  checkboxClass: 'icheckbox_minimal-red',
  radioClass: 'iradio_minimal-red',
  .........

 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
design vue 表格开启列排序的操作
Oct 28 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
You might like
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
服务中心夜班服务员岗位职责
2013/11/27 职场文书
静心口服夜广告词
2014/03/20 职场文书
建筑学专业自荐书
2014/07/09 职场文书
兽医医药专业求职信
2014/07/27 职场文书
防灾减灾活动总结
2014/08/30 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
小兵张嘎观后感
2015/06/03 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Python学习之包与模块详解
2022/03/19 Python