当前位置:JS特效 » 按钮图标 » 简单的纯js滑动按钮插件
 简单的纯js滑动按钮插件
如果您觉得内容不错,请分享:

插件介绍

这是一款简单的纯js滑动按钮插件。通过该js插件,可以将checkbox元素变为好看的iOS或MaterialDesign样式的滑动按钮。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:78
简要教程

这是一款简单的纯js滑动按钮插件。通过该js插件,可以将checkbox元素变为好看的iOS或Material Design样式的滑动按钮。

使用方法

在页面中引入SimpleSwitch.css样式文件和SimpleSwitch.min.js文件。


        
                
HTML结构

要生成一个滑动按钮,只需要在元素上添加data-type属性。然后在页面底部通过SimpleSwitch.init()方法来初始化插件即可。例如:






                
初始化插件

在页面底部,可以通过通过SimpleSwitch.init()方法来初始化该滑动按钮js插件。

            
                
手动创建滑动按钮

你也可以手动实例化一个滑动按钮,下面是手动实例化一个滑动按钮需要用到的参数:

参数 类型 默认值 是否必须 描述
element HTMLElement null 必须 用于生成滑动按钮的checkbox元素。如果selector参数未设置则必须填写。
selector String null 必须 用于生成滑动按钮的checkbox元素的选择器。如果element参数未设置则必须填写。
material Boolean false 不是必须 表示是否生成Material Design样式的滑动按钮。

例如:


                
var myCheckbox = document.getElementById("my-checkbox");

new SimpleSwitch.Switch({
    element: myCheckbox,
    material: true
});                    
                

SimpleSwitch.js滑动开关按钮插件的github地址为:https://github.com/aeolingamenfel/simple-switch

Top