Switchery 好看的ios7样式按钮
2018年4月24日引入css和js
|
1 2 |
<link rel="stylesheet" href="dist/switchery.css" /> <script src="dist/switchery.js"></script> |
开始调用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> $(document).ready(function () { //设置按钮样式 defaults = { color: '#1ab394', //开关元件的颜色 secondaryColor: '#dfdfdf', //辅助颜色为背景颜色和边框，当开关关闭时 jackColor: '#fff', //插孔/手柄元件的默认颜色 jackSecondaryColor: null, //未检查的千斤顶/手柄元件的颜色 className: 'switchery', //switch元素的类名（缺省情况下在switchery.css中设置） disabled: false, //启用或禁用点击事件并更改开关状态（布尔值） disabledOpacity: 0.5, //禁用时开关的不透明度为真（0到1） speed: '0.1s', //转换将花费的时间长度，例如。'0.4s'，'1s'，'2.2s'（注意：手柄的转换速度缩短了两倍） size: 'default' //开关元件的尺寸(small or large) }; var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); //获取类的数据 elems.forEach(function(html) { //遍历 var switchery = new Switchery(html); }); }); </script> |
