【前端】使用jQuery封装一套UI组件 - 级联选择器组件

简介: 本篇文章来讲解下级联选择器组件级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等最后面会附上全部代码
作者:小5聊基础
简介:一只喜欢全栈方向的程序员,欢迎咨询,尽绵薄之力答疑解惑
编程原则:Write Less Do More

GI2F.gif

【级联选择器特点】

1)级联选择器,可以多层展开

2)当没有子集时,则不显示展开下级箭头

3)当有子集时,则有显示展开下级的向右箭头

4)没有限制的情况下,可以无限展开

5)json格式可以定义为

{
    text:'一级文本',
    value:'值,也可以是ID唯一值',
    children:[
        {
            text:'二级文本',
            value:'ID值',
            children:[]
        }
    ]
}

【级联选择器布局设计】

1)先设置一个父级div,宽度设定为200px,高度和行高为35px,同时设定文本超过宽度隐藏,并设置决定定位,占一个空间位置,同时也是为了给子元素一个相对定位参考

2)再设置一个箭头向下的默认图标,这里通过css样式的方式设置一个箭头图标,有个小技巧,就是设置一个div高宽度为0,但是边框有值得情况,只显示其中一个方向得边框就可以出现箭头,其他三个边框设定为透明即可,如下

image.png

<div style="margin-left:100px;display:inline-block;width:0;height:0;border-top: 30px solid #aaa;border-right: 30px solid #ccc;border-bottom: 30px solid #999;border-left: 30px solid #555;">

</div>

<div style="margin-left:100px;display:inline-block;width:0;height:0;border-top: 30px solid #aaa;border-right: 30px solid transparent;border-bottom: 30px solid transparent;border-left: 30px solid transparent;">

</div>

3)接着设置一个关键弹窗div,宽度设定为200px,最小高度为150px,最大高度为300px

4)然后就是选项div,设置内边距以及选项hover样式,同时在左右边设置一个小箭头

image.png

.ci-arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid #999;
    width: 8px;
    height: 8px;
    border-left: none;
    border-bottom: none;
    transform: rotate( 45deg);
}

5)同时在弹出div外再嵌套一个父级div设置阴影,大概原型就出来了

image.png

6)滚动条样式设置

image.png

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 6px;
}
/* 滚动竖线 */
::-webkit-scrollbar-track {
    border-radius: 6px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(0,0,0,0.1);
}
    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255,0,0,0.4);
    }

【级联选择器交互】

1)定义一个json数组值,用于遍历动态生成下拉选项值

2)先绑定文本框得点击事件,点击后先动态生成一级选项,并弹出显示,同时箭头也变为向上。切换可以用一个flag来做判断,隐藏和显示

3)循环添加选项逻辑<br/>
如果有子集,那么选项添加一个向右的箭头<br/>
完成选项循环后,给选型绑定一个点击事件<br/>
如果选项有子集,那么就再次调用循环选项方法,动态生成,以此类推<br/>
特别是多层嵌套,必须给每个选项添加一个index下标,格式:index|index|...

image.png

【全局代码】

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>cascader级联选择器组件</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }
    </style>
</head>
<body>

    <style type="text/css">
        .cascader-box {
            position: relative;
            font-size: 15px;
            color: #555;
        }

        .cascader-text-div {
            width: 178px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #c0c4cc;
            padding: 0 10px;
            cursor: pointer;
        }

        .cascader-arrow-down {
            width: 0;
            height: 0;
            border-top: 8px solid #aaa;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            float: right;
            margin-top: 15px;
        }

        .cascader-arrow-up {
            width: 0;
            height: 0;
            border-bottom: 8px solid #aaa;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            float: right;
            margin-top: 15px;
        }

        .cascader-area {
            width: 200px;
            height: 172px;
            box-shadow: 0 0 13px #ccc;
            position: absolute;
            left: 0px;
            top: 40px;
        }

        .cascader-div {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 198px;
            border: 1px solid #c0c4cc;
            background: #fff;
            min-height: 150px;
            z-index: 10;
            height: 100%;
            overflow: auto;
        }

        .cascader-item {
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            position: relative;
        }

            .cascader-item:hover {
                background: #e3e3e3;
            }

        .cascader-item-action {
            background: #e3e3e3 !important;
        }

        .ci-arrow {
            position: absolute;
            top: 10px;
            right: 10px;
            border: 2px solid #999;
            width: 8px;
            height: 8px;
            border-left: none;
            border-bottom: none;
            transform: rotate( 45deg);
        }

        .cascader-scrollbar {
            scrollbar-face-color: #fcfcfc;
            scrollbar-highlight-color: #6c6c90;
            scrollbar-shadow-color: #fcfcfc;
            scrollbar-3dlight-color: #fcfcfc;
            scrollbar-arrow-color: #240024;
            scrollbar-track-color: #fcfcfc;
            scrollbar-darkshadow-color: #48486c;
            scrollbar-base-color: #fcfcfc
        }

        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width: 6px;
        }
        /* 滚动竖线 */
        ::-webkit-scrollbar-track {
            border-radius: 6px;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background: rgba(0,0,0,0.1);
        }
            ::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255,0,0,0.4);
            }
    </style>
    <div style="width:600px;height:500px;background:#fff;padding:10px;margin:0 auto;margin-top:30px;border-radius:10px;box-shadow:0 0 13px #ccc;">
        
        <div class="cascader-box" style="margin-top:200px;">
            <div id="cascader2" class="cascader-text-div">
                <span>请选择所属值</span>
                <div class="cascader-arrow-down"></div>
            </div>

            <div class="cascader-area" style="display:none;"></div>
        </div>
    </div>



</body>
</html>

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

        var jsonArr = [
            {
                text: '一级文本',
                value: '1',
                children: [
                    {
                        text: '二级文本1',
                        value: '1',
                        children: []
                    },
                    {
                        text: '二级文本2',
                        value: '2',
                        children: [
                            {
                                text: '三级文本1',
                                value: '1',
                                children: []
                            },
                            {
                                text: '三级文本2',
                                value: '2',
                                children: []
                            },
                        ]
                    },
                    {
                        text: '二级文本3',
                        value: '3',
                        children: []
                    }
                ]
            },
            {
                text: '一级文本2',
                value: '2',
                children: []
            },
            {
                text: '一级文本3',
                value: '3',
                children: [
                    {
                        text: '二级文本1',
                        value: '1',
                        children: []
                    },
                    {
                        text: '二级文本2',
                        value: '2',
                        children: []
                    }
                ]
            },
            {
                text: '一级文本4',
                value: '4',
                children: []
            },
            {
                text: '一级文本5',
                value: '5',
                children: []
            },
            {
                text: '一级文本6',
                value: '6',
                children: []
            },
            {
                text: '一级文本7',
                value: '7',
                children: []
            }
        ];

        function loadData(level, index) {

            var dom = $('<div></div>');
            dom.addClass("cascader-div cascader-scrollbar");

            if (level == 2) {
                dom.css({ "left": (200 - 1), "zIndex": 10 - level });
            }
            else if (level == 3) {
                dom.css({ "left": (400 - level - 1), "zIndex": 10 - level });
            }

            var json = jsonArr;
            if (level == 2 && index != undefined) {
                json = jsonArr[index].children;
            }
            else if (level == 3 && index != undefined) {
                var ids = index.split('|');
                json = jsonArr[ids[0]].children[ids[1]].children;
            }

            for (var i = 0; i < json.length; i++) {
                var data = json[i];
                var option = $('<div><span></span></div>');
                option.addClass("cascader-item");
                option.attr('data-value', data.value);
                option.attr('data-level', level);
                if (level == 1) {
                    option.attr('data-index', i);
                }
                else {
                    option.attr('data-index', index + "|" + i);
                }
                option.attr('data-length', data.children.length);

                $("span", option).eq(0).html(data.text);

                if (data.children.length > 0) {
                    option.append('<span class="ci-arrow"></span>');
                }

                dom.append(option);
            }

            $(".cascader-area").append(dom);
        }

        $("#cascader2").click(function () {

            var flag = $(this).attr('data-flag');
            if (flag == undefined || flag == "close") {
                flag = "open";
                $(".cascader-area").show();
                $(".cascader-arrow-down").removeClass("cascader-arrow-down").addClass("cascader-arrow-up");
            }
            else {
                flag = "close";
                $(".cascader-area").hide();
                $(".cascader-arrow-up").removeClass("cascader-arrow-up").addClass("cascader-arrow-down");
            }
            $(this).attr('data-flag', flag);

            loadData(1);
        });

        function itemEvent() {
            $(document).on("click", ".cascader-item", function () {
                var level = parseInt($(this).attr('data-level'));
                var index = $(this).attr('data-index');
                var length = parseInt($(this).attr('data-length'));

                var parent = $(this).parent();
                $(".cascader-item", parent).removeClass('cascader-item-action');
                $(this).addClass('cascader-item-action');

                $(".cascader-div").eq(level).remove();
                if (parseInt(length) > 0) {
                    var next_level = level + 1;
                    loadData(next_level, index);

                    $(".cascader-area").css({ "width": next_level * 200 - next_level });
                }
                else {

                    $(".cascader-area").css({ "width": level * 200 - level });
                }
            });
        }
        itemEvent();

    })
</script>
相关文章
|
4月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
121 4
|
4月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
179 1
|
25天前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
260 0
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
323 12
|
4月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
JavaScript 前端开发
jquery选择器【总结】
  本文总结整理了jquery里和选择器相关的所有方法,通过这篇文章,可以让你学习到在jquery里使用选择器的所有方法。 一:基本选择器: $("#aijquery") 选择id值等于aijquery的元素 $("p") 选择所有的P标签元素 $(".
1063 0
|
Web App开发 JavaScript
|
JavaScript 数据可视化 前端开发
|
JavaScript 数据可视化
jquery 选择器的总结
元素选择 $("input") id选择 $('#id') class选择 $('.id') 属性选择 $('[prop]')或者$('[prop=“value1”]')或者$('input[prop=“value1”]') 选择所有 $("*")  层叠选择器: $("form input...
1029 0
|
JavaScript 索引
jQuery选择器总结
阅读目录 1, 基本选择器? 2, 层次选择器?  3, 过滤选择器? 4, 表单选择器?        jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。
1122 0

热门文章

最新文章

  • 1
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    180
  • 2
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    289
  • 3
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    324
  • 4
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    479
  • 5
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    419
  • 6
    unity判断鼠标在不在UI上
    370
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    251
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    移动端UI名词 - AxureMost
    205
  • 10
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
    2629