本篇文章介绍一个比较好使用的js开关插件switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单、灵活,支持的绝大部分浏览器(chrome, firefox, opera, safari, ie8+),github地址:https://github.com/abpetkov/switchery
以下为开关样式展示:
<link rel="stylesheet" href="dist/switchery.css" /> <script src="dist/switchery.js"></script>
html元素
<input type="checkbox" class="js-switch" checked >
单个元素初始化
var elem = document.queryselector('.js-switch'); var init = new switchery(elem);
多个元素统一初始化
var elems = array.prototype.slice.call(document.queryselectorall('.js-switch')); elems.foreach(function(html) { var switchery = new switchery(html); });
带配置选项初始化
var config = {'color':'#fff'} var init = new switchery(elem,config);
配置选项
defaults = { color : '#64bd63', //开关元件的颜色(十六进制或rgb值) secondarycolor : '#dfdfdf', //次要的背景颜色和边框的颜色,当开关是关闭的 jackcolor : '#fff', //抬起/按下元素的默认颜色 jacksecondarycolor: null, //第二抬起/按下元素的默认颜色 classname : 'switchery', //开关元件的类名(默认样式switchery.css) disabled : false, //启用或禁用单击事件和改变开关的状态(布尔值) disabledopacity : 0.5, //不透明度,当不可见时为true(范围0-1) speed : '0.1s', //转型需要的时间长度,动画效果长度。 size : 'default' //样式的大小(small or large) }
在点击开关时候,通过以下事件获取当前checkbox的状态,可操作对应事件
on change:
var changecheckbox = document.queryselector('.js-check-change'); changecheckbox.onchange = function() { alert(changecheckbox.checked); };
on click:
var clickcheckbox = document.queryselector('.js-check-click') , clickbutton = document.queryselector('.js-check-click-button'); clickbutton.addeventlistener('click', function() { alert(clickcheckbox.checked); });
jqery版本:
$('.js-switch').change(function () { alert(this.checked) })
//禁用 switchery.disable(); //可用 switchery.enable(); //switchery是初始化后的对象
switchery.setposition(false); //设置按钮为开启状态 switchery.handleonchange(true); //设置按钮为关闭状态
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论