当前位置：首页 > 网页特效 > 按钮特效

Switch.js-iOS样式滑动开关按钮JS插件

分类：按钮特效日期：2024-05-14 点击(1) 评论(0)

简介

在页面中引入switch.css和switch.js文件。

```html
<link rel="stylesheet" href="path/to/switch.css">
<script src="path/to/switch.js"></script>    
```
#####  HTML结构
可以将任意的checkbox控件转换为滑动按钮。

```html
<input type="checkbox" class="checkbox-switch"/>
```
#####  初始化插件
可以通过new Switch()方法来创建一个swith实例。

```html
var el = document.querySelector('.checkbox-swtich');
var mySwitch = new Switch(el, options);
```
#####  配置参数
switch.js滑动按钮插件的默认配置参数如下：

```html
defaults = {
    size             : 'default'
  , checked          : undefined
  , onText           : 'Y'
  , offText          : 'N'
  , onSwitchColor    : '#64BD63'
  , offSwitchColor   : '#fff'
  , onJackColor      : '#fff'
  , offJackColor     : '#fff'
  , showText         : false
  , disabled         : false
  , onInit           : function(){}
  , onChange         : function(){}
  , onRemove         : function(){}
  , onDestroy        : function(){}
};                 
```
- size：滑动按钮的尺寸，可以是default | small | large。
- checked：滑动按钮的状态。如果是undefined，在滑动按钮的状态根据checkbox来确定。
- onText：ON状态的文本。
- offText：OFF状态的文本。
- onSwitchColor：选中状态时switch元素的颜色。
- offSwitchColor：未选中状态时switch元素的颜色。
- onJackColor：选中状态时凸起圆形的颜色。
- offJackColor：未选中状态时凸起圆形的颜色。
- showText：在凸起圆形中是否显示文本。
- disabled：是否允许点击切换滑动按钮的状态。
- onInit：滑动按钮初始化结束后触发的事件。
- onChange：在原始的checkbox为checked状态时触发的回调函数。
- onRemove：当mySwitch.remove()时触发。
- onDestroy：当mySwitch.destroy()时触发。
#####  API
switch.js滑动按钮插件的可用API如下：

- .on()：设置为ON状态。
- .off()：设置为OFF状态。
- .toggle()：切换滑动按钮的状态。
- .disable()：禁用滑动按钮。
- .enable()：启用滑动按钮。
- .destroy()：销毁滑动按钮，移除所有绑定的事件。
- .remove()：移除滑动按钮，显示原始的checkbox。

web299.com

Switch.js-iOS样式滑动开关按钮JS插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果