基于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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
offsetParent 算法分析
Apr 05 Javascript
range 标准化之获取
Aug 28 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
基于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 强制下载文件实现代码
2013/10/28 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python socket实现简单聊天室
2018/04/01 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python编程中类与类的关系详解
2019/08/08 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
动画设计系毕业生求职信
2014/07/15 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
现实表现材料范文
2014/12/23 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
Sql Server之数据类型详解
2022/02/28 SQL Server