基于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使用攻略 第二部
Jul 01 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
Javascript动画效果(2)
Oct 11 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
创建简单的node服务器实例(分享)
Jun 23 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
javascript运行机制之执行顺序理解
Aug 03 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python实现在线翻译功能
2020/03/03 Python
python属于解释型语言么
2020/06/15 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
英语商务邀请函范文
2014/01/16 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
党员一帮一活动总结
2014/07/08 职场文书
总经理检讨书
2014/09/15 职场文书
群众路线剖析材料
2014/09/30 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle