Iron Man Day 24 - Switchery

by Sheng Huang Huang

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<input type="checkbox" id="switcher" />

<input type="checkbox" id="switcher2" />

JavaScript

var switcheryOptions = { 
  color: '#64bd63', // 當checked時的背景顏色
  secondaryColor: '#dfdfdf', // unchecked時的背景顏色
  jackColor: '#fff', // checked時的按鈕顏色
  jackSecondaryColor: null, // uncheck時的按鈕顏色
  className: 'switchery', // class名稱
  disabled: false, // 是否設為disabled
  disabledOpacity: 0.5, // 當設為disabled時的透明度
  speed: '0.1s', // 開關切換的速度
  size: 'default' // 開關大小(small, default, large)
};

new Switchery(document.getElementById('switcher'), switcheryOptions);


var switcheryOptions2 = { 
	color: '#fff',
  secondaryColor: '#000',
  jackColor: '#000',
  jackSecondaryColor: '#fff'
};

new Switchery(document.getElementById('switcher2'), switcheryOptions2);