js开关插件使用
2018-12-13 08:57:01来源:博客园 阅读 ()
一、简介
本篇文章介绍一个比较好使用的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); //设置按钮为关闭状态
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:常见的DOM操作有哪些
- Jquery插件写法笔记整理 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
- jQuery插件开发全解析 2020-03-25
- js中去掉字串左右空格 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash