页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

IOS风格滑动开关按钮插件 Switch

表单 按钮 移动开发 HTML我帮您 1年前  次浏览

Switch.js是一款可以将任意CheckBox控件转换为iOS样式滑动开关按钮的JS插件。Switch.js使用简单,功能强大,它可以控制滑动按钮的尺寸,颜色,状态等,按钮开关滑动时带有很炫的动画和渐变效果

IOS风格滑动开关按钮插件 Switch

npm:

$ npm install weatherstar-switch --save-dev

Usage

<input type="checkbox" class="checkbox-switch" />

standalone version

var el = document.querySelector('.checkbox-swtich');
var mySwitch = new Switch(el, options);

work with module bundle

require('weatherstar-switch/dist/switch.css');
var Switch = require('weatherstar-switch');

var el = document.querySelector('.checkbox-swtich');
var mySwitch = new Switch(el, options);

Settings and Defaults

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 : size of switch element, can be default | small | large
    checked : state of switch and checbox, if undefined the switch state according to the checkbox
    onText : text in the jack when switch ON
    offText : text in the jack when switch OFF
    onSwitchColor : color of checked switch element
    offSwitchColor : color of unchecked switch element
    onJackColor : color of checked jack element
    offJackColor : color of unchecked jack element
    showText : show or hide text in the jack of switch
    disabled : enable or disable click events and changing the state of the switch
    onInit : called when switch init finish
    onChange : called when original checkbox's checked change
    onRemove : called when mySwitch.remove()
    onDestroy : called when mySwitch.destroy()



相关链接

发表评论