插件描述：honeySwitch，一款手机风格的开关按钮插件，简洁优雅、一见倾心
更新时间：2017/2/9 下午10:12:15
更新说明：修复在移动端，点击开关按钮，出现系统自带阴影。
honeySwitch使用
1.引入honeySwitch.css，honeySwitch.js
2.例如：
<span class="switch-off"></span>
switch-off表示默认关闭，switch-on表示默认开启
如何禁用元素
添加class:switch-disabled.
例如开启禁用：
<span class="switch-on switch-disabled"></span>
例如关闭禁用：
<span class="switch-off switch-disabled"></span>
API
switchEvent方法给元素绑定开启关闭动作执行的内容。需要传入三个参数，第一个是id，字符串类型;第二个匿名函数表示开启执行的内容；第三个匿名函数表示关闭执行的内容。
例如：
switchEvent("#id",function(){开啦},function(){关啦});在项目中，初始化时，需要根据服务器返回的状态值设定开关的显示状态，你可以直接改变class.或者使用
honeySwitch.showOn("#id"),honeySwitch.showOff("#id")控制开关显示状态。
主题色
1.默认主题色为绿色,直接使用<script>honeySwitch.themeColor="颜色值";</script>修改默认主题色。
2.定制单个元素主题色，给元素添加themeColor属性
例如：
<span class="switch-on" themeColor="颜色值"></span>
大小
可以通过css zoom属性自由定制任意大小，这里不做过多描述。
特色
honeySwitch提供了类似手机switch开关的效果风格，它不仅适用于PC端，也适用于移动端。
PREVIOUS:
NEXT:
相关插件-选择框,独立的部件
讨论这个项目（36）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
DreamLeader 1
2019/3/4 13:33:03
js 添加：
honeySwitch.status = function(ele) {
if ($(ele).hasClass("switch-on")) {
return true;
} else {
return false;
}
}honeySwitch.status("#id")会更好！
568405016 0
2018/8/10 11:18:57
-
如何监听它是否是true或者false，我需要交互的时候拿到这个值
5684050160
2018/8/10 11:20:50
-
我是用vue搭建的项目，需要在.vue文件中获取该怎么办
时过境迁。 1
2018/7/11 23:47:48
关于监听事件 失效的问题 用一下代码 以下亲测可行：
$(function() {
switchEvent("#baoswitch", function() {
alert('1')
}, function() {
alert('2');
});
});
5684050160
2018/8/10 11:36:07
-
请问一下，如何在.vue文件中获取到这个元素的true与false
飞 0
2018/6/14 11:52:50
换成了
$("name").click(function() {
switchEvent("id", function() {}, function() {})
});这样就会累计重复调用，这是为什么
飞0
2018/6/14 16:31:40
-
我去js里边把switchEvent那段取出来使用了，在datatable中就可以使用了
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
