【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件

简介: 下拉框也是比较常用的组件,对应原生的下拉标签就是select本篇文章就来讲讲可编辑下拉框组件的封装过程
作者:小5聊基础
简介:一只喜欢全栈方向的程序员,欢迎咨询,尽绵薄之力答疑解惑
编程原则:Write Less Do More

【静态布局】

1)组件整体设计 <br/>
组件框架、左边为输入文本框、右边为箭头图标、隐藏区域的下拉列表值 <br/>
2)先设置一个组件框架div,设置宽度为230px,高度为30px <br/>
3)框架内,左边设置一个div,左浮动,宽度为200px,高度和行高为30px <br/>
浮动的div内设置一个input标签,用于输入信息 <br/>
4)框架内,右边设置一个div,同样是左浮动,高宽度均为30px <br/>
浮动的div内设置一个span标签,用于设置图标 <br/>
5)设置箭头向下图标 <br/>
border: 8px solid transparent;border-top-color:#ccc;
6)设置箭头向上图标 <br/>
在箭头向下的基础上,设置旋转180度样式可得到箭头向上箭头
transform:rotate(180deg);

  • 效果

image.png

  • 代码
<style type="text/css">
    .arrow-down {
        display: inline-block;
        background-color: transparent;
        width: 0px;
        font-weight: bold;
        border: 8px solid transparent;
        border-top-color: #ccc;
        margin: 10px 0 0 6px;
    }
</style>
<div class="" style="width:230px;height:30px;border:1px solid #ccc;">
    <div style="width:200px;height:30px;line-height:30px;float:left;">
        <input placeholder="请选择" style="float:none;margin-left:0px;width:90%;padding-left:5%;" />
    </div>
    <div style="width:30px;height:30px;float:left;">
        <span class="arrow-down"></span>
    </div>
</div>

【隐藏区域的下拉框】

1)框架内,设置一个下拉框的父级div,宽度设置为230px,高度为200px,超出高度则显示滚动条 <br/>
2)设置选项区域,div标签包含span标签
div标签设置高度和行高为35px,并设置手指样式,以及hover高亮样式,span标签则显示对应的文本值 <br/>

  • 效果

image.png

【箭头图标分析】

1)设置一个目标样式的宽度为0,并转为块和行内元素display:inline-block <br/>
2)设置边框为8px,可以根据自己情况设定,默认透明 <br/>
border: 8px solid transparent; <br/>
3)可以分别设置边框四个方向的颜色 <br/>
border-top-color、border-right-color、border-bottom-color、border-left-color
image.png

<div style="width:0;display:inline-block;border:80px solid transparent;border-top-color:#099dff;border-right-color:#f38237;border-bottom-color:#db85ea;border-left-color:#5cd5e9;">
</div>

【交互设置】

1)绑定文本框和箭头点击事件 <br/>
点击文本框,箭头由向下变为向上,同时显示下拉文本框,可以设置flag标志来回切换 <br/>
这里有个小技巧,当点击其他地方时,也就是document,也要隐藏下拉,但是点击箭头和文本框都会触发document点击事件,所以,可以在文本框点击事件里加一个事件冒泡 <br/>
2)下拉框选项模板 <br/>

<script type="text/template" id="selectTemplate">
    <div class="select-item">
        <span></span>
    </div>
</script>

3)页面加载时,循环下拉选项值 <br/>
获取模板html,然后清空前后空格转为dom对象,给虚拟dom对象赋值,最后通过获取完整html追加到目标下拉div里

  • 效果

image.png

  • 代码
var selectArr = ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'];
function createSelect() {
    var template = $("#selectTemplate").html().trim();
    var html = '';
    for (var i = 0; i < selectArr.length; i++) {
        var dom = $(template);
        $("span", dom).html(selectArr[i]);
        html += dom.prop('outerHTML');
    }
    $(".select-list-div").html(html);
}
createSelect();

4)设置下拉选项的点击事件 <br/>
同时也设置防止冒泡,子元素和父元素同时设置点击事件时,先会从内到外逐个触发事件,可以给子级设置防止冒泡来阻断父级事件得触发
5)

【主要知识点列表】

编号 语言或插件 知识点 说明
1 css transition 过渡、渐变属性,transition:all .5s
2 css transform 转变属性,一般结合旋转、放缩、坐标轴等,transform:rorate(180deg),旋转180度
3 js event 事件对象,var event = event window.event;
4 js stopPropagation 阻止事件冒泡,var event = event window.event;

【完整代码】

<style type="text/css">
    .select-div {
        width: 230px;
        height: 30px;
        border: 1px solid #ccc;
        position: relative;
        border-radius: 5px;
    }

    .arrow-span {
        transition: all .5s;
        -moz-transition: all .5s; /* Firefox 4 */
        -webkit-transition: all .5s; /* Safari 和 Chrome */
        -o-transition: all .5s; /* Opera */
    }

    .arrow-down {
        display: inline-block;
        width: 0px;
        border: 8px solid transparent;
        border-top-color: #ccc;
        margin: 10px 0 0 6px;
    }

    .arrow-up {
        display: inline-block;
        width: 0px;
        border: 8px solid transparent;
        border-top-color: #ccc;
        transform: rotate(180deg);
        margin: 2px 0 0 6px;
    }

    .select-list-div {
        width: 230px;
        height: 200px;
        position: absolute;
        top: 35px;
        left: 0px;
        border-radius: 5px;
        box-shadow: 0 0 13px #ccc;
        background: #fff;
        overflow:auto;
    }

    .select-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

        .select-item span {
            margin-left: 30px;
        }

        .select-item:hover, .select-item-action {
            background: #f3f3f3;
        }
</style>
<div class="select-div">
    <div style="width:200px;height:30px;line-height:30px;float:left;">
        <input id="btnMajor" placeholder="请选择" style="float:none;margin-left:0px;width:90%;padding-left:5%;" />
    </div>
    <div class="arrow-div" style="width:30px;height:30px;float:left;">
        <span class="arrow-span arrow-down"></span>
    </div>
    <!--下拉框列表-->
    <div class="select-list-div" style="display:none;"></div>
</div>

<!--下拉选项模板-->
<script type="text/template" id="selectTemplate">
    <div class="select-item">
        <span></span>
    </div>
</script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {
    // 文本框点击事件
        $("#btnMajor,.arrow-div").click(function (event) {
            var flag = $(".select-div").attr('data-flag');
            if (flag == '1') {
                $(".select-list-div").hide();
                $(".arrow-span").removeClass('arrow-up');
                $(".select-div").attr('data-flag', '0');
            }
            else {
                $(".select-list-div").show();
                $(".arrow-span").addClass('arrow-up');
                $(".select-div").attr('data-flag', '1');
            }

            event.stopPropagation();
        });
        $(document).click(function () {
            $("#btnMajor").trigger('click');
        });

        // 循环遍历下拉选项值
        var selectArr = ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'];
        function createSelect() {
            var template = $("#selectTemplate").html().trim();
            var html = '';
            for (var i = 0; i < selectArr.length; i++) {
                var dom = $(template);
                $("span", dom).html(selectArr[i]);
                html += dom.prop('outerHTML');
            }
            $(".select-list-div").html(html);
        }
        createSelect();

        // 选项点击事件
        $(".select-item").click(function (event) {

            event.stopPropagation();
        });
    });
</script>
相关文章
|
6月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
486 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
394 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
277 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
239 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
571 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
10月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
141 3
|
9月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
86 0
|
10月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
153 1
|
11月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
259 2
|
11月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
1343 1