bootstarp风格的toggle效果分享

　　最近在写项目的时候想要一个这样的效果:

　　我知道这个效果在 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: block9;
            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- 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>

View Code

　　整体的效果是依赖于jQuery，当用户点击了label按钮会触发input的click事件，然后判断给父级添加不同的classname；

　　相关：

　　　　flat-ui

作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329