Want a different checkbox? Try iOS Style Switch! :)

🐰 A simple and powerful iOS style switch for checkbox.

Live Preview

Installation

Standalone:

Copy the code

npm:

$ npm install weatherstar-switch --save-devCopy the code

Usage

Copy the code

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

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

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

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(){}
};Copy the code

• 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()

API

.on()

Set switch ON.

.off()

.toggle()

Toggle switch.

.disable()

.enable()

Enable events bind to switch.

.destroy()

.remove()

Remove switch form DOM and show the checkbox.

License