bootstarp風格的toggle效果分享 - diligenceday－IT工程師數位筆記本

文章出處

　　最近在寫項目的時候想要一個這樣的效果:

　　我知道這個效果在 flat-ui中有，但是我又不想引用一整個flat-ui;

　　這個效果依賴html5的transition，所以瀏覽器兼容成問題；

　　從flat-ui中把這個效果的js和html，以及css給撥離出來；

　　整體的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <h1>
        toggle的demo
    </h1>
    <style>
        .toggle {
            background-color: #8AB9E3;
            border-radius: 60px;
            color: white;
            height: 29px;
            margin: 5px 12px 12px 0;
            overflow: hidden;
            *zoom: 1;
            display: inline-block;
            zoom: 1;
            *display: inline;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            -o-transition: 0.25s;
            transition: 0.25s;
            -webkit-backface-visibility: hidden;
            -webkit-box-sizing: initial
        }

        .toggle:before, .toggle:after {
            display: table;
            content: "";
        }

        .toggle:after {
            clear: both;
        }

        .toggle.toggle-off {
            background-color: #cbd2d8;
        }

        .toggle.toggle-off .toggle-radio {
            /*background-image: url("../images/icon-off.png")*/;
            background-position: 0 0;
            color: white;
            left: 0;
            margin-left: 0.5px;
            margin-right: -13px;
            z-index: 1;
        }

        .toggle.toggle-off .toggle-radio:first-child {
            left: -120%;
        }

        .toggle .toggle-radio {
            /*background: url("../images/icon-on.png") right top no-repeat;*/
            color: #0275d8;
            display: block;
            font-weight: 700;
            height: 21px;
            left: 120%;
            margin-left: -13px;
            padding: 5px 32px 3px;
            position: relative;
            text-align: center;
            z-index: 2;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            -o-transition: 0.25s;
            transition: 0.25s;
            -webkit-backface-visibility: hidden;
        }

        .toggle .toggle-radio:first-child {
            margin-bottom: -29px;
            left: 0;
        }

        .toggle input {
            display: none;
            position: absolute;
            outline: none !important;
            display: block\9;
            opacity: 0.01;
            filter: alpha(opacity=1);
            zoom: 1;
        }

        .toggle.toggle-icon {
            border-radius: 6px 7px 7px 6px;
        }

        .toggle.toggle-icon.toggle-off {
            border-radius: 7px 6px 6px 7px;
        }

        .toggle.toggle-icon.toggle-off .toggle-radio {
            /*background-image: url("../images/block-off.png");*/
            background-position: 0 0;
        }

        .toggle.toggle-icon .toggle-radio {
            /*background-image: url("../images/block-on.png");*/
            background-position: 62px 0;
            border-radius: 6px;
            min-width: 27px;
            text-align: right;
        }

        .toggle.toggle-icon .toggle-radio:first-child {
            text-align: left;
        }
    </style>
    <div class="toggle pull-left">
        <label class="toggle-radio" for="toggleOption2">ON</label>
        <input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked">
        <label class="toggle-radio" for="toggleOption1">OFF</label>
        <input type="radio" name="toggleOptions" id="toggleOption2" value="option2">
    </div>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
    <script>

        //toggle插件的js代碼
        var toggleHandler = function(toggle) {
            var toggle = toggle;
            var radio = $(toggle).find("input");

            var checkToggleState = function() {
                if (radio.eq(0).is(":checked")) {
                    $(toggle).removeClass("toggle-off");
                } else {
                    $(toggle).addClass("toggle-off");
                }
            };

            checkToggleState();

            radio.eq(0).click(function() {
                $(toggle).toggleClass("toggle-off");
            });

            radio.eq(1).click(function() {
                $(toggle).toggleClass("toggle-off");
            });
        };

        $(".toggle").each(function(index, toggle) {
            toggleHandler(toggle);
        });
    </script>
</body>
</html>