🐰 A simple and powerful switch for checkbox.
Switch branches/tags
Nothing to show
Clone or download
Zhiyu.Liu
Zhiyu.Liu update README
Latest commit a4eeef8 Mar 29, 2017
Permalink
Failed to load latest commit information.
build fix bug Jun 8, 2016
demo demo page Jun 8, 2016
dist build Mar 6, 2017
src 1. add hook: beforeChange, beforeRemove, beforeDestroy Mar 6, 2017
test/unit optimize Jun 7, 2016
.gitignore add lifecycle and disabled state Jun 6, 2016
.travis.yml CI only maser Jun 7, 2016
LICENSE Initial commit May 26, 2016
README.md update README Mar 29, 2017
index.html add fastclick Jun 8, 2016
package.json update version Mar 6, 2017

README.md

Switch

Build Status Coverage Status

🐰 A simple and powerful iOS style switch for checkbox.

Live Preview

Installation

Standalone:
<link rel="stylesheet" href="dist/switch.css" />
<script src="dist/switch.js"></script>
npm:
$ npm install weatherstar-switch --save-dev

Usage

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

standalone version

var el = document.querySelector('.checkbox-switch');
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-switch');
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(){}
  , beforeChange     : function(){}
  , onChange         : function(){}
  , beforeRemove     : function(){}
  , onRemove         : function(){}
  , beforeDestroy    : 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
  • beforeChange : called before original checkbox's checked change
  • onChange : called when original checkbox's checked change
  • beforeRemove : called before remove switch element from DOM
  • onRemove : called when remove switch element from DOM done
  • beforeDestroy : called before remove all events on switch element
  • onDestroy : called when remove all events on switch element done

API

.getChecked()

Get switch element checked status.

.on()

Set switch ON.

.off()

Set switch OFF.

.toggle()

Toggle switch.

.disable()

Disable events bind to switch.

.enable()

Enable events bind to switch.

.destroy()

Remove all events bind to switch.

.remove()

Remove switch form DOM and show the checkbox.

License

MIT © zhiyul