优雅的jQuery开关按钮插件honeySwitch

查看演示立即下载

插件描述：honeySwitch，一款手机风格的开关按钮插件，简洁优雅、一见倾心

更新时间：2017/2/9 下午10:12:15

更新说明：修复在移动端，点击开关按钮，出现系统自带阴影。

1.引入honeySwitch.css，honeySwitch.js

2.例如：

1	`<span` `class="switch-off"></span>`

switch-off表示默认关闭，switch-on表示默认开启

如何禁用元素

添加class:switch-disabled.

例如开启禁用：

1	`<span` `class="switch-on switch-disabled"></span>`

例如关闭禁用：

1	`<span` `class="switch-off switch-disabled"></span>`

switchEvent方法给元素绑定开启关闭动作执行的内容。需要传入三个参数，第一个是id，字符串类型;第二个匿名函数表示开启执行的内容；第三个匿名函数表示关闭执行的内容。

例如：

1	`switchEvent("#id",function(){开啦},function(){关啦});`

在项目中，初始化时，需要根据服务器返回的状态值设定开关的显示状态，你可以直接改变class.或者使用

1	`honeySwitch.showOn("#id"),honeySwitch.showOff("#id")`

控制开关显示状态。

1.默认主题色为绿色,直接使用<script>honeySwitch.themeColor="颜色值";</script>修改默认主题色。

2.定制单个元素主题色，给元素添加themeColor属性

例如：

1	`<span` `class="switch-on"` `themeColor="颜色值"></span>`

大小

可以通过css zoom属性自由定制任意大小，这里不做过多描述。

特色

honeySwitch提供了类似手机switch开关的效果风格，它不仅适用于PC端，也适用于移动端。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com