jquery+layui+css开关功能

jquery+layui+css开关功能

html中

// 开关
<td style="cursor: pointer;width: 117px;" onclick="Switch('{$item.id}','{$item.is_recommend}')"type="{$item.id}">
     <div class="btn_fath clearfix {$item.is_recommend_text}" onclick="toogle(this)">
         <div class="move" data-state="{$item.is_recommend_text}"></div>
            <div class="btnSwitch btn1">是</div>
         	<div class="btnSwitch btn2 ">否</div>
    </div>
</td>

JS获取结果并弹出展示

<script>
    function das(id, type) {
        $.ajax({
            url: "/****/*****/*****",
            data: {id: id, is_recommend: type},
            type: "post",
            dataType: "json",
            success: function (aa) {
                if (aa.code == 200) {
                    //第三方扩展皮肤
                    parent.layer.alert(aa.msg, {
                        icon: 1,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    })
                }
            },
            error: function () {
                alert('未知的错误请重试');
            }
        })
    }

    function toogle(th) {
        var ele = $(th).children(".move");
        if (ele.attr("data-state") == "on") {
            ele.animate({
                left: "0"
            }, 300, function () {
                ele.attr("data-state", "off");
            });
            $(th).removeClass("on").addClass("off");
        } else if (ele.attr("data-state") == "off") {
            ele.animate({
                left: '60px'
            }, 300, function () {
                $(this).attr("data-state", "on");
            });
            $(th).removeClass("off").addClass("on");
        }
    }
</script>

CSS修改样式

<style>
    .switch {
        width: 100px;
        margin: 50px 0px 0 100px;
    }

    .btn_fath {
        margin-top: 10px;
        position: relative;
        border-radius: 20px;
    }

    .btn1 {
        float: left;
    }

    .btn2 {
        float: right;
    }

    .btnSwitch {
        height: 40px;
        width: 50px;
        border: none;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
        text-align: center;
        z-index: 1;
    }

    .move {
        z-index: 100;
        width: 54px;
        border-radius: 20px;
        height: 40px;
        position: absolute;
        cursor: pointer;
        border: 1px solid #828282;
        background-color: #f1eff0;
        box-shadow: 1px 2px 2px 1px #fff inset, 0 0 5px 1px #999;
    }

    .on .move {
        left: 54px;
    }

    .on.btn_fath {
        background-color: #44b549;
        height: 40px
    }

    .off.btn_fath {
        background-color: #828282;
        height: 40px
    }

</style>