关于 SwitchButton 切换开关的一些事

背景

昨天作项目的时候，遇到了一个小问题，是关于 switch button 的，就是这个 咱们在不少地方看到过它，最典型的就是咱们手机的通知管理，常常收到各类 APP 的通知，很烦对不对？有一个"容许通知"按钮，禁用它就能够了。

switchButton 的实现

html

<div class="switch mt5 switch-primary round switch-inline">
       <input type="checkbox" name="itemSwitch" id="itemSwitch">
       <label for="itemSwitch"></label>
</div>

样式

.switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    input {
        display: none;
    }

总结

制做switchButton 的过程为：

1. 模板：div{input[checkbox] + label} = switchButton
2. css: 设置最外层宽高和定位方式为相对定位，为子元素设置绝对定位铺垫，而且隐藏该 div，设置里面的元素是否为 checked 的背景颜色。设置里面元素 checked 时在 x 位置上移动整个 label 距离。若是 switchbutton 是圆角，还要设置 border-radius。

注意：若是要禁用 checkbox 的单击事件，只须要在 input 里面直接添加 disabled。