前端 自定义下拉列表框

今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后默认的蓝色框,option的hover无法改变等等。。。

在许多次尝试失败后,我决定,定义一个属于自己的下拉列表,当然啦,我并不想用那些组件,虽然用组件很快吧,但是当一个项目中用的组件多了以后,总是会出现好多不可控的因素,相信在座的大牛都比我懂的多,那就开始这次体验吧~~

效果图:

嗯。。学了半天gif图还是不会,等小编以后再补上图,后面有源码,大家直接复制即可。。

理一下思路:

  • 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
  • li 标签下的就是我们的标签
  • ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
  • 在div 中分为两块 span 和 img
  • span 就是文字”请选择一个标签”
  • img 则是向下向上的图标
  • 点击后,图标会变 span会变 div的边框会变 当然你也可以随意为li(你的标签)添加一些hover样式

因为公司项目中有jquery,所以有部分jquery的代码,当然你想用js原生实现也可以哦
好了,就那么简单,让我们来写一次自己的组件吧


html代码

<ul class="dropdown" tabindex="1">
        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
            <span>请选择标签</span>
            <div class="dp-img">
                <img src="images/dp-down.png" width="15" height="20">
            </div>
        </div>

        <li class="dp-list hide">标签一</li>
        <li class="dp-list hide">标签二</li>
        <li class="dp-list hide">标签三</li>
        <li class="dp-list hide">标签四</li>
</ul>

简单分析下上述代码,ul,li 结构 下面分为一个<div>和若干个<li>标签。
<div class="dp-select">下有一个<span>用来装默认标签文字,还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
<li>就是各位一个个的标签啦,我给它定义了一个‘dp-list’的样式
html就只有那么多了,接下来让我们看看css

css代码

<style>
    .dropdown{
        width: 150px;
        height: 30px;
        line-height: 30px;
        padding:0px;
        cursor: pointer;
        outline: 0;
        border:1px solid #8a8a8a;
    }
    .dropdown .dp-list{
        list-style: none;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #8a8a8a;
        border-right: 1px solid #8a8a8a;
        border-bottom: 1px solid #8a8a8a;
        position: relative;
        left: -1px;

    }
    .dropdown .dp-list:hover{
        background: #8a8a8a;
        color: #ffffff;
    }
    .dropdown .dp-img{
        float: right;
        width: 20px;
        height: 30px;
        display: flex;
        justify-content:center;
        align-items:center;
        border-left: 1px solid #8a8a8a;
    }
    .hide {
        display: none;
    }
</style>

css属实没啥好说的,dp-img 也就是我放图标的那个小div,我这里采用的是flex布局,让图标居中。
当然,如果你们想用background使图标居中也没问题啦,个人习惯而已~
hide是我定义的一个隐藏li标签的样式,为了让js代码写的少一些。如果不想写,在js中改成display:none 就可以咯

js代码

<script type="text/javascript">
    $('.dropdown .dp-select').on('click',function(){
        if($('.dropdown li').hasClass('hide')){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-up.png');
            //显示li标签
            $('.dropdown li').removeClass('hide');
            //加点点击样式
            $('.dropdown').css('border','1px solid lightblue');
            $('.dropdown .dp-img').css('border-left','1px solid lightblue');
        }else{
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        }
    });
    //点击li 标签后发生的事件
    $('.dropdown li').on('click',function(){
        var text = $(this).text();
        console.log(text);
        $('.dp-select span').text(text);
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');

    });
    //失去焦点发生的事件
    $('.dropdown').blur(function(){
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    });
</script>

终于看到js了,其实可以发现js代码并不多,好吧,我承认,我写的还是比较冗余的。
如果精简下的话可能会更少哦!

pass:这里我用jquery的,不喜欢用jquery的话,可以自己去把其中一些方法替换成js原生~

第一个方法,为dp-select元素添加了click事件。
解释下,就是你点默认的那个框的时候,下面的li标签会显示,图标img(就是一开始是向上的图标)你点了以后,就会换成向下的图标。
jquery.css是我自己加的一些样式,大家可以自己修改。

第二个方法,给li标签的点击事件,很简单,点击以后替换span中的text值,其他跟上面方法一样,换图标,换样式。。

第三个方法,这是感觉最有意思的一个方法了,给div添加blur方法。
因为我们都知道,一个下拉列表框,你在不属于它的地方点击后,应该会缩回去吧。
为了实现这个效果,我采用给最大的ul标签添加tabindex=“1”
这样ul标签就可以跟input框一样,使用
blur,focus`等等方法了。
失去焦点后,自然是隐藏li 修改样式,修改图标。

差不多介绍完啦,第一次写博客,很菜。大家在实践过程中会发现ul标签是不是显得没有那么必要?
当然每一个自己写的小东西需要不停地去优化,以前我用过无数组件,但是自己写一个很小很小的组件的时候,也会发现好多的问题。需要与大家共勉。

对于以上写的下拉列表,接下来需要考虑的就是封装了。

如果可以这样子调用我们的自己定义的下拉列表框,会不会很酷?

<ul class="dp-default my-dark">
        请选择标签
        <li class="dp-list">标签一</li>
        <li class="dp-list">标签二</li>
        <li class="dp-list">标签三</li>
        <li class="dp-list">标签四</li>
</ul>

小结

这样子,感觉像自己创建一个组件一样。下一篇会详细讲讲如何将自己写出来的小东西,再更加进一步的封装,其中还包括对html元素进行封装等等。

就到这里吧,附上源码。希望能有更多的机会跟大家交流~

源码

注意:有俩个图标在 大家可以直接另存为这两张图
Jquery的话。。自己在网上找一个jquery.js就好了!
images/dp-down.pngimages/dp-up.png

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!--  img  #8a8a8a -->
    <style>
        .dropdown{
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding:0px;
            cursor: pointer;
            outline: 0;
            border:1px solid #8a8a8a;
        }
        .dropdown .dp-list{
            list-style: none;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #8a8a8a;
            border-right: 1px solid #8a8a8a;
            border-bottom: 1px solid #8a8a8a;
            position: relative;
            left: -1px;

        }
        .dropdown .dp-list:hover{
            background: #8a8a8a;
            color: #ffffff;
        }
        .dropdown .dp-img{
            float: right;
            width: 20px;
            height: 30px;
            display: flex;
            justify-content:center;
            align-items:center;
            border-left: 1px solid #8a8a8a;
        }
        .hide {
            display: none;
        }
    </style>

</head>
<body>
    <ul class="dropdown" tabindex="1">
        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
            <span>请选择标签</span>
            <div class="dp-img">
                <img src="images/dp-down.png" width="15" height="20">
            </div>
        </div>

        <li class="dp-list hide">标签一</li>
        <li class="dp-list hide">标签二</li>
        <li class="dp-list hide">标签三</li>
        <li class="dp-list hide">标签四</li>
    </ul>


    <ul class="dp-default my-dark">
        请选择标签
        <li class="dp-list">标签一</li>
        <li class="dp-list">标签二</li>
        <li class="dp-list">标签三</li>
        <li class="dp-list">标签四</li>
    </ul>
</body>     
</html>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
    $('.dropdown .dp-select').on('click',function(){
        if($('.dropdown li').hasClass('hide')){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-up.png');
            //显示li标签
            $('.dropdown li').removeClass('hide');
            //加点点击样式
            $('.dropdown').css('border','1px solid lightblue');
            $('.dropdown .dp-img').css('border-left','1px solid lightblue');
        }else{
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        }
    });
    失去焦点发生的事件
    $('.dropdown').blur(function(){
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    });
    点击li 标签后发生的事件
    $('.dropdown li').on('click',function(){
        var text = $(this).text();
        console.log(text);
        $('.dp-select span').text(text);
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');

    });
</script>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页