honeySwitch API

分手后的思念是犯贱 2021-07-26 17:28 280阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

源码下载 [https://download.csdn.net/download/liming1016/12400888][https_download.csdn.net_download_liming1016_12400888]

**如何快速使用**

> 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端，也适用于移动端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/06d7075b302c4e8b896b098597991ca9.png
[https_download.csdn.net_download_liming1016_12400888]: https://download.csdn.net/download/liming1016/12400888