js开关插件使用
程序员文章站
2024-01-14 08:39:58
一、简介 本篇文章介绍一个比较好使用的js开关插件Switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单、灵活,支持的绝大部分浏览器(Chrome, Firefox, Opera, Safari, IE8+),github地址:https://github.com ......
一、简介
本篇文章介绍一个比较好使用的js开关插件switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单、灵活,支持的绝大部分浏览器(chrome, firefox, opera, safari, ie8+),github地址:https://github.com/abpetkov/switchery
以下为开关样式展示:
二、使用
1.引入js
<link rel="stylesheet" href="dist/switchery.css" /> <script src="dist/switchery.js"></script>
2.初始化开关样式
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) })
四、api介绍
1.设置开关禁用或者启用
//禁用 switchery.disable(); //可用 switchery.enable(); //switchery是初始化后的对象
2.设置开关开启或者关闭
switchery.setposition(false); //设置按钮为开启状态 switchery.handleonchange(true); //设置按钮为关闭状态
推荐阅读
-
js开关插件使用
-
vue.js自定义select2指令并使用ajax远程获取值(包括鼠标滑动下拉分页)
-
js插件-swfUpload上传到ftp目录下,该怎么配置
-
Sublime Text2 中Emmet(之前叫Zencoding)插件安装以及使用
-
PHP小技巧之JS和CSS优化工具Minify的使用方法_PHP
-
sublime3如何使用sublimegit插件拉取coding上的项目?
-
js使用console计算代码运行时间的方法
-
jQuery 图像裁剪插件Jcrop的简单使用_jquery
-
实例详解jQuery dateRangePicker插件使用方法
-
MyEclipse安装JS代码提示需要安装插件Spket