【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件

简介: 本篇文章来讲解下是和否的滑动切换组件切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
作者:小5聊基础
简介:一只喜欢全栈方向的程序员,欢迎咨询,尽绵薄之力答疑解惑
编程原则:Write Less Do More

GIF2.gif

【滑动切换组件特点】

1)默认为未启用状态,值为0

2)由底部具有一定高宽度的滑动背景层,默认为灰色状态

3)灰色背景层上有一个滑动小圆圈,默认在左边停靠

4)当切换到开状态时,滑动背景轨道变为蓝色等高亮状态颜色

5)当切换到开状态时,滑动小圆圈从左边滑动到右边

6)当切换到开状态时,值由0变为1,可以设置保存到一个input隐藏域里

【滑动切花组件布局】

1)先设置一个父级div,宽度定为60px,高度和行高定为24px,背景为灰色,并且为鼠标点击状态cursor:pointer,边框设置为圆形边框,border-radius:24px;

image.png

 <div style="cursor:pointer;width: 60px;height: 24px;line-height: 24px;background: #e3e3e3;position:relative;border-radius:24px;">
 </div>

2)再父级div基础上,添加一个小圆圈div,高宽度为18px,和父级div有6px的差值,相对父级定位,top值即可设置为3px,位于垂直居中状态

image.png

<style type="text/css">
    .switch-div {
        cursor: pointer;
        width: 60px;
        height: 24px;
        line-height: 24px;
        background: #e3e3e3;
        position: relative;
        border-radius: 24px;
        overflow: hidden;
    }

        .switch-div .icon-div {
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background: #fff;
            position: absolute;
            top: 3px;
            left: 3px;
        }
</style>
<div style="width:300px;height:500px;background:#fff;padding:10px;margin:0 auto;margin-top:30px;border-radius:10px;box-shadow:0 0 13px #ccc;">

    <div class="switch-div" style="">
        <div class="icon-div"></div>
    </div>
</div>

3)在上面两步操作,已经出来原型了,接下来就是显示开和关文本值,设置一个span标签显示文本

image.png

【滑动切换组件动起来】

  • 方法一 - 使用animate动画方法实现

1)先给切换组件绑定一个点击事件

2)在点击方法里,获取组件宽度,因为有3px距离空隙值,所以滑动宽度需要减去3px,并且还要减去小圆圈的宽度

3)设置小圆圈使用animate动画,left从3px滑动到右边,在滑动的同时也需要高亮背景

4)同时文本值显示在左边

5)设置一个属性data-flag,保存当前开和关状态,1=表示开,0=表示关

GIF.gif

  • 方法二 - 在方法一逻辑基础上,改为transition样式方式

1)设置一个焦点class,所有开状态的样式值设置到class里

2)当开状态时,添加class焦点值

3)当关状态时,去掉class焦点值

image.png

image.png

【主要知识点列表】

编号 语言或插件 知识点 说明
1 jQUery $(dom).animate() 动画方法,元素样式从一个状态到另一个状态的变化
2 css transition 过渡、渐变属性,transition:all .5s all表示所有属性,也可以设置单个或者多个,多个用逗号隔开

【完整代码】

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>switch切换组件</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }
    </style>
</head>
<body>

    <style type="text/css">
        .switch-div {
            cursor: pointer;
            width: 60px;
            height: 24px;
            line-height: 24px;
            background: #e3e3e3;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            text-align: right;
            color: #333;
            font-size: 13px;
        }

            .switch-div .span {
                margin-right: 8px;
            }

            .switch-div .icon-div {
                width: 18px;
                height: 18px;
                border-radius: 18px;
                background: #fff;
                position: absolute;
                top: 3px;
                left: 3px;
                transition: left .3s;
                -moz-transition: left .3s; /* Firefox 4 */
                -webkit-transition: left .3s; /* Safari 和 Chrome */
                -o-transition: left .3s; /* Opera */
            }

        .switch-div-action {
            background: #099dff;
            color: #fff;
            text-align: left;
        }

            .switch-div-action .icon-div {
                left: 39px;
            }

            .switch-div-action .span {
                margin-left: 8px;
            }
    </style>
    <div style="width:300px;height:500px;background:#fff;padding:10px;margin:0 auto;margin-top:30px;border-radius:10px;box-shadow:0 0 13px #ccc;">
        <div class="switch-div switch-div1" style="">
            <div class="icon-div"></div>
            <span class="span">关</span>
        </div>

        <div style="width:100%;height:50px;"></div>

        <div class="switch-div switch-div2" style="" data-text="禁用|启用">
            <div class="icon-div"></div>
            <span class="span">禁用</span>
        </div>
    </div>

</body>
</html>

<!--交互js-->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {

        $(".switch-div1").click(function () {

            var width = $(this).width();
            var widthIcon = $(".icon-div").width();

            var flag = $(this).attr("data-flag");
            if (flag == undefined || flag == "0") {
                flag = "1";
                $(".switch-div1").css({ "textAlign": "left", "background": "#099dff", "color": "#fff" });
                $(".switch-div1 .span").html('开').css({ "marginLeft": "8px" });
                $(".switch-div1 .icon-div").animate({ left: width - widthIcon - 3 }, 300);
            }
            else {
                flag = "0";
                $(".switch-div1").css({ "textAlign": "right", "background": "#e3e3e3", "color": "#333" });
                $(".switch-div1 .span").html('关').css({ "marginRight": "8px" });
                $(".switch-div1 .icon-div").animate({ left: 3 }, 300);
            }
            $(this).attr("data-flag", flag);

        });

        $(".switch-div2").click(function () {
            
            var flag = $(this).attr("data-flag");
            var text = $(this).attr("data-text");
            if (flag == undefined || flag == "0") {
                flag = "1";
                $(".switch-div2").addClass("switch-div-action");
                $(".switch-div2 .span").html(text.split('|')[1]);
            }
            else {
                flag = "0";
                $(".switch-div2").removeClass("switch-div-action");
                $(".switch-div2 .span").html(text.split('|')[0]);
            }
            $(this).attr("data-flag", flag);

        });
    })
</script>
相关文章
|
15天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
15 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
51 0
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
69 0
|
4月前
|
前端开发 JavaScript 程序员
[前端学习]文件组件专题
[前端学习]文件组件专题
32 1
|
3月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
61 0
|
3月前
|
前端开发 JavaScript 测试技术
掌握函数式组件:迈向现代化前端开发的关键步骤(下)
掌握函数式组件:迈向现代化前端开发的关键步骤(下)
掌握函数式组件:迈向现代化前端开发的关键步骤(下)
|
3月前
|
缓存 前端开发 JavaScript
掌握函数式组件:迈向现代化前端开发的关键步骤(上)
掌握函数式组件:迈向现代化前端开发的关键步骤(上)
掌握函数式组件:迈向现代化前端开发的关键步骤(上)
|
3月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
123 0
|
3月前
|
开发框架 前端开发 JavaScript
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
|
3月前
|
前端开发 JavaScript C#
一个WPF版的Layui前端UI库
一个WPF版的Layui前端UI库