基于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 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP 验证码的实现代码
2011/07/17 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python WindowsError的错误代码详解
2017/07/23 Python
有趣的python小程序分享
2017/12/05 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
python super函数使用方法详解
2020/02/14 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Pycharm修改python路径过程图解
2020/05/22 Python
如何选择使用结构还是类
2014/05/30 面试题
大学军训自我鉴定
2013/12/15 职场文书
给市场的环保建议书
2014/05/14 职场文书
商务经理岗位职责
2014/08/03 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年领班工作总结
2015/04/29 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书