码迷,mamicode.com
首页 > 其他好文 > 详细

ul模拟select

时间:2018-01-21 21:29:26      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:class   remove   hover   dex   mock   round   event   pen   value   

HTML

<span class="theContainer"></span>

CSS

    body {padding:10px;}
    * {margin:0; padding:0; font-size:12px;}
    ul,li
    {
        list-style-type:none;
    }
    .theMockSelect{
        width: 160px;
        display: inline-block;
        line-height: 20px;
        position: relative;
    }
    .mockSelectBox{
        display: block;
        width: 180px;
        overflow: hidden;
    }
    .liContainer{
        width: 160px;
    }
    .liContainer li{
        line-height:25px;
        padding-left:5px;
        display: block;
        min-width: 170px;
    }
    .liContainer li:hover{
        display:block;
        background: #ccc;
    }
    .clickIcon{
        position: absolute;
        right: -10px;
        top: 12px;
        width: 0;
        height: 0;
        border-top: 8px solid #aaa;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }
     .theInput{
         display: block;
         width: 90%;
         height: 28px;
         padding: 2px 8px;
         font-size: 14px;
         line-height: 1.42857143;
         color: #555;
         background-color: #fff;
         background-image: none;
         border: 1px solid #ccc;
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
         -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
         -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
         transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      }

JS

 $(document).ready(function () {
         var theMockSelect = {
             className:‘theMockSelect‘, //一个ul的id,放模拟框
             dataArray:[‘first‘,‘second‘,‘third‘,‘forth‘],//数组数据
             dataObj:[
                 {key:‘qwe1‘,value:‘11‘},
                 {key:‘qwe2‘,value:‘22‘},
                 {key:‘qwe3‘,value:‘33‘},
                 {key:‘qwe4‘,value:‘44‘}
             ],//数组数据
             init:function(theContainer,data,flag){
                 this.className = theContainer?theContainer:this.className;
                 this.dataArray = data?data:this.dataArray;

                 var allTheLi=‘‘,theDataArray = this.dataArray;
                  $(‘.‘+this.className).append(‘<ul class="theMockSelect"><li class="mockSelectBox"><input class="theInput" type="text" readonly="readonly"/><div class="clickIcon"></div><ul class="liContainer"></ul></li></ul>‘);

                  for(var i=0,l=theDataArray.length;i<l;i++){
                        allTheLi += ‘<li>‘+theDataArray[i]+‘</li>‘;
                  }

                  $(‘.liContainer‘).append(allTheLi);
                 //根据参数看是否想输入
                 $(‘.theInput‘).prop(‘readonly‘,flag);
                 this.allTheEvent();
             },
             allTheEvent:function(){
                  $(‘.liContainer‘).hide();
                  //点击下拉
                  $(‘.clickIcon‘).on(‘click‘,function () { //鼠标移动函数
                      var theUl = $(this).parent().find(‘.liContainer‘);
                      if(theUl.is(‘:hidden‘)) {
                          theUl.children().show();
                          theUl.slideDown();  //找到ul.son_ul显示
                          $(this).parent().find(‘li‘).hover(function () {
                              $(this).addClass(‘hover‘);
                          }, function () {
                              $(this).removeClass(‘hover‘)
                          });
                      }else {
                          theUl.slideUp();
                      }
                      });
                  //点击子元素
                  $(‘.liContainer li‘).on(‘click‘,function () {
                      $(this).parent().parent().find(‘input‘).val($(this).html());
                      $(this).parent().slideUp();
                  });
                  //输入事件
                 $(‘.theInput‘).on(‘keyup‘,function(){
                     var youInput = $(this).val();
                     $(‘.liContainer li‘).each(function(index,item){
                         if($(item).text().indexOf(youInput)>=0&&youInput!==‘‘){
                             $(item).show();
                             $(‘.liContainer‘).slideDown();
                         }else {
                             $(item).hide();
                         }
                     });
                 });
             }
         };

        theMockSelect.init(‘theContainer‘,[‘666‘,‘555‘,‘333‘,‘111‘],false);
    });

 

ul模拟select

标签:class   remove   hover   dex   mock   round   event   pen   value   

原文地址:https://www.cnblogs.com/1rookie/p/8325365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!