關於 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。