web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
按钮特效
Switch.js-iOS样式滑动开关按钮JS插件
分类:
按钮特效
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
在页面中引入switch.css和switch.js文件。 ```html
``` ##### HTML结构 可以将任意的checkbox控件转换为滑动按钮。 ```html
``` ##### 初始化插件 可以通过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。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告