如何在Switchery Plugin中向jackColor添加框阴影

Question

我的复选框有一个iOS7风格的开关。但我需要给操控者看一个盒子的阴影。如何添加方框阴影时，它检查，我的代码如下

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

elems.forEach(function (html) {
var switchery = new Switchery(html, {color: '#fff', jackColor: '#00aeef', jackSecondaryColor: ''});

html.onchange = function () {

    var medicineId = html.name;
    var checked = html.checked;
    var form = $('form').get(0);

    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "{{\App\Helpers\serverName()}}/change-medicine-alarm?medicineId=" + medicineId + "&alarm=" + checked,
        type: "post",
        data: new FormData(form),
        dataType: "json",
        contentType: false,
        cache: false,
        processData: false
    }).done(function (res) {
        var information = res;
        console.log(information);
    });

Answer 1

我搜索了很多，最后我决定阅读Javascript主文件。

我将, boxShadow : null添加到默认的数组中，然后将this.jack.style.boxShadow = (this.options.boxShadow !== this.options.boxShadow) ? this.options.boxShadow : '-6px 0px 9px 1px #dcdcdc';添加到Switchery.prototype.setPosition中，然后将this.jack.style.boxShadow = this.options.boxShadow;添加到Switchery.prototype.colorize函数中。最后调用我的脚本。你可以在代码片段中找到我的描述

​

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


Switchery.prototype.setPosition = function (clicked) {
  var checked = this.isChecked()
    , switcher = this.switcher
    , jack = this.jack;

  if (clicked && checked) checked = false;
  else if (clicked && !checked) checked = true;

  if (checked === true) {
    this.element.checked = true;

    if (window.getComputedStyle) jack.style.left = parseInt(window.getComputedStyle(switcher).width) - parseInt(window.getComputedStyle(jack).width) + 'px';
    else jack.style.left = parseInt(switcher.currentStyle['width']) - parseInt(jack.currentStyle['width']) + 'px';

    if (this.options.color) this.colorize();
    this.setSpeed();
  } else {
    jack.style.left = 0;
    this.element.checked = false;
    this.switcher.style.boxShadow = 'inset 0 0 0 0 ' + this.options.secondaryColor;
    this.switcher.style.borderColor = this.options.secondaryColor;
    this.switcher.style.backgroundColor = (this.options.secondaryColor !== defaults.secondaryColor) ? this.options.secondaryColor : '#fff';
    this.jack.style.backgroundColor = (this.options.jackSecondaryColor !== this.options.jackColor) ? this.options.jackSecondaryColor : this.options.jackColor;
    this.jack.style.boxShadow = (this.options.boxShadow !== this.options.boxShadow) ? this.options.boxShadow : '-6px 0px 9px 1px #dcdcdc';
    this.setSpeed();
  }
};



Switchery.prototype.colorize = function() {
  var switcherHeight = this.switcher.offsetHeight / 2;

  this.switcher.style.backgroundColor = this.options.color;
  this.switcher.style.borderColor = this.options.color;
  this.switcher.style.boxShadow = 'inset 0 0 0 ' + switcherHeight + 'px ' + this.options.color;
  this.jack.style.backgroundColor = this.options.jackColor;
  this.jack.style.boxShadow = this.options.boxShadow;
};
//Wherever you want to call the plugin you need to call like bellow

 var switchery = new Switchery(html, {color: '#fff', jackColor: '#00aeef', boxShadow:'-6px 0px 9px 1px #dcdcdc'});

​