开发自己的checkbox

作者: OnlyPiglet | 来源:发表于2019-06-08 22:54 被阅读18次

    CheckBox

    效果图

    每日美图

    html结构

                <div class="wch-checkbox-outline">
                    <div class="wch-checkbox">
                        <div class="on">    
                            <span>ON</span>
                        </div>
                        <div class="separator-line">
                        </div>
                        <div class="off">   
                            <span>OFF</span>
                        </div>
                    </div>
               </div>
    

    主体由5个部分组成

    1. checkbox 外框
    2. checkbox主体
    3. on块
    4. 灰色的分割线
    5. off块

    CSS

    *{
    
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    
    html,body{
        height: 100%;
        font-size: 20px;
    }
    
    .demo{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    
    .demo-container{
        
        display: block;
    
    }
    
    
    .wch-checkbox-outline{
        width:9rem;
        height: 3rem;
        border-radius: 4px;
        display: block;
        background-color: #f1eac7;
        box-sizing: border-box;
    }
    
    .wch-checkbox-outline .wch-checkbox{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
    }
    
    
    
    
    .wch-checkbox-outline .wch-checkbox .on{
        width:  80%;
        height: 100%;
        box-sizing: border-box;
        background-color:           #ffd8c3;
        display: flex;
        justify-content: center;
        align-items: center;
        transition:all 1s  ease 0.2s;
    }
    
    
    .wch-checkbox-outline .wch-checkbox .separator-line{
        width: 2%;
        height: 100%;
        box-sizing: border-box;
        background-color: #778899;
        display: flex;
        opacity:0.8;
        transform:rotate(0deg);
    
    }
    
    
    .wch-checkbox-outline .wch-checkbox .off{
        width: 18%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:       #eaf3c9;
        transition:all  1s  ease 0.2s;
        opacity:0.3;
    }
    
    
    .wch-checkbox-outline .wch-checkbox .on span{
        
        width: 50%;
        color:  #fdb5b9;
        font: 1rem Arial,Verdana,"宋体";
        overflow: hidden;
        text-align: center;
    
    }
    
    .wch-checkbox-outline .wch-checkbox .off span{
        width: 50%;
        color: #bbbbee;
        font: 1rem Arial,Verdana,"宋体";
        overflow: hidden;
        text-align: center;
    }
    

    css的内容有些多我会一个一个讲解我当时的思路

    *{
    
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    
    html,body{
        height: 100%;
        font-size: 20px;
    }
    
    .demo{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    
    .demo-container{
        
        display: block;
    
    }
    

    这一部分主要时全局消除padding 和 margin 避免计算大小的麻烦 并设置一下超出显示区域时的反馈为隐藏;
    后面设置html和body的高度为100%因为html默认 宽度100%时 是占据整个屏宽的 高度是父容器的大小,而顶级的html或者body没有设置为100%的话,那高度一般都是有容器内的元素大小决定的,所以这边设置为100%是为了配合 demo 的样式 width: 100%; height: 100%; display: flex;justify-content: center;align-items: center;让我们演示的 组件能够居中的显示在屏幕中间,demo-container样式有没有都一样这边习惯块级元素所以又加了一层 并设置 css display:block;

    .wch-checkbox-outline{
        width:9rem;
        height: 3rem;
        border-radius: 4px;
        display: block;
        background-color: #f1eac7;
        box-sizing: border-box;
    }
    
    .wch-checkbox-outline .wch-checkbox{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
    }
    
    

    wch-checkbox-outline设置了外边框的圆角 wch-checkbox设置内部布局方式为flex

    .wch-checkbox-outline .wch-checkbox .on{
        width:  80%;
        height: 100%;
        box-sizing: border-box;
        background-color:   #ffd8c3;
        display: flex;
        justify-content: center;
        align-items: center;
        transition:all 1s  ease 0.2s;
    }
    
    
    .wch-checkbox-outline .wch-checkbox .separator-line{
        width: 2%;
        height: 100%;
        box-sizing: border-box;
        background-color: #778899;
        display: flex;
        opacity:0.8;
        transform:rotate(0deg);
    
    }
    
    
    .wch-checkbox-outline .wch-checkbox .off{
        width: 18%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:       #eaf3c9;
        transition:all  1s  ease 0.2s;
        opacity:0.3;
    }
    
    
    .wch-checkbox-outline .wch-checkbox .on span{
        
        width: 50%;
        color:  #fdb5b9;
        font: 1rem Arial,Verdana,"宋体";
        overflow: hidden;
        text-align: center;
    
    }
    
    .wch-checkbox-outline .wch-checkbox .off span{
        width: 50%;
        color: #bbbbee;
        font: 1rem Arial,Verdana,"宋体";
        overflow: hidden;
        text-align: center;
    }
    

    这部分分别设置了on 分割线 和 off 以及 on和off内的文字样式 这边需要注意的时为了点击时颜色的变化需要在on和 off这两个div设置 transition:all 1s ease 0.2s;

    Js文件

    $(".wch-checkbox .on").on("click",function(){
    
            $(this).css("width" ,"80%" );
            $(this).css("opacity" ,"1" );
            $(".wch-checkbox .off").css("width" ,"18%" );
            $(".wch-checkbox .off").css("opacity" ,"0.3" );
            $(".wch-checkbox").data("checked",true);
    
    })
    
    $(".wch-checkbox .off").on("click",function(){
    
            $(this).css("width" ,"80%" );
            $(this).css("opacity" ,"1" );
            $(".wch-checkbox .on").css("width" ,"18%" );
            $(".wch-checkbox .on").css("opacity" ,"0.3" );
            $(".wch-checkbox").data("checked",false);
    
    })
    

    组件以来jquery-3.4.1 主要绑定的是点击on或者off时设置 checkbox的 checked 属性为true或者false 还有就是on和 off被点击时 宽度 颜色和透明度的细节设置。

    源码下载

    源代码可以点击链接下载

    😄

    至此基本讲解完毕,人生的意义也许就是留下些什么吧 那就创造吧 😀。

    相关文章

      网友评论

        本文标题:开发自己的checkbox

        本文链接:https://www.haomeiwen.com/subject/phywxctx.html