漂亮的自訂 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 光是可以簡單自訂顏色就很方便了,有興趣的可以試試看。

留言