基于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编程起步(第七课)
Jan 10 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
JQuery实现图片轮播效果
May 08 jQuery
详解微信小程序 相对定位和绝对定位
May 11 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
测量JavaScript函数的性能各种方式对比
Apr 27 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
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python生成密码字典的方法
2018/07/06 Python
python logging模块的使用详解
2020/10/23 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
党支部创先争优活动总结
2014/08/28 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL