漂亮的自訂 checkbox 樣式- Switchery

做網站實要把 checkbox 做樣式一直都是一件很麻煩的事情，一般我們都會仰賴一些 js 的 plugin 幫我們處理這邊的樣式會比較省事，這次就來介紹這個 Switchery。

一樣下載後安裝，或是使用 component 或 bower 等安裝方式。

基本 html

接下來使用 js

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

可以設定的選項

defaults = {
    color             : '#64bd63'
  , secondaryColor    : '#dfdfdf'
  , jackColor         : '#fff'
  , jackSecondaryColor: null
  , className         : 'switchery'
  , disabled          : false
  , disabledOpacity   : 0.5
  , speed             : '0.1s'
  , size              : 'default'
}

如果一個頁面有很多個 checkbox 的話

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

這個 plugin 光是可以簡單自訂顏色就很方便了，有興趣的可以試試看。