jQuery自定義多選下拉框

CRown團隊發表於2017-12-25
jQuery

　　專案中需要自定義一個下拉框多選外掛，業務問題還是自己實現比較好

　　通過$.fn 向jQuery新增新的方法

　　

　　下拉資料通過引數傳遞進去，通過呼叫該外掛時接收，選擇後的確定與取消事件採用事件傳遞方式

　　程式碼如下：

1.效果圖

2.程式碼

 1 <div id="demo" class="dropdown-container">
 2     <div class="dropdown-display">
 3       <span></span>
 4       <input type="text" class="iptdiplay" placeholder="請選擇" readonly="readonly" />
 5     </div>
 6     <div class="dropdown-panel">
 7       <div class="dropdown-search">
 8         <span></span>
 9         <input type="text"  class="iptsearch" placeholder="關鍵字搜尋" />
10       </div>
11       <ul class="dd-select">
12         <!--  area for dropdown items -->
13       </ul>
14       <div class="dropdown-opt">
15         <button class="dd-btn ok">確定</button>
16         <button class="dd-btn cancel">取消</button>
17       </div>
18     </div>
19   </div>複製程式碼

  1 .dropdown-container{
  2     display: block;
  3     width: 200px;
  4     height: 30px;
  5     padding: 0px;
  6     position: relative;
  7     margin: 0px auto;
  8 }
  9 
 10 .dropdown-display{
 11     display: block;
 12     height: 30px;
 13     position: absolute;
 14     top: 0;
 15     width:100%;
 16     margin: 0px;
 17     border:1px solid steelblue;
 18 }
 19 .dropdown-display span{
 20     background: url(../static/choose_down_icon_01.png) no-repeat left 8px;
 21     display: block;
 22     height: 25px;
 23     width: 10px;
 24     position: absolute;
 25     right: 5px;
 26     top: 3px;
 27 }
 28 .dropdown-display input[class='iptdiplay']{
 29     border: none;
 30     border-color: transparent;
 31     background: transparent;
 32     border-radius: 0px;
 33     box-shadow: none;
 34     height: 30px;
 35     width: 100%;
 36     margin: 0px;
 37     box-sizing: border-box;
 38     box-shadow: none;
 39     padding-left: 10px;
 40     padding-right: 18px;
 41     outline: none;
 42     cursor: pointer;
 43     text-overflow: ellipsis;
 44 }
 45 .dropdown-panel {
 46     position: absolute;
 47     top: 32px;
 48     width:100%;
 49     padding: 0px;
 50     display: none;
 51     border-left: 1px solid steelblue;
 52     border-bottom: 1px solid steelblue;
 53     border-right: 1px solid steelblue;
 54 }
 55 
 56 .dropdown-panel .dropdown-search{
 57     display: block;
 58     width: 100%;
 59     height: 30px;
 60 }
 61 .dropdown-search span{
 62     background: url(../static/chosen-sprite.png) no-repeat 100% -20px,linear-gradient(#eee 1%,#fff 15%);
 63     display: block;
 64     height: 25px;
 65     width: 20px;
 66     position: absolute;
 67     right: 0px;
 68     top: 3px;
 69 }
 70 .dropdown-search input[class='iptsearch']{
 71     border: none;
 72     border-color: transparent;
 73     background: transparent;
 74     border-radius: 0px;
 75     box-shadow: none;
 76     height: 30px;
 77     width: 100%;
 78     margin: 0px;
 79     box-sizing: border-box;
 80     box-shadow: none;
 81     padding-left: 10px;
 82     outline: none;
 83 }
 84 .dropdown-panel .dd-select{
 85     display: block;
 86     width:100%;
 87     position: relative;
 88     height: auto;
 89     margin: 0px;
 90     padding:0px !important;
 91     box-sizing: border-box;
 92     list-style-type: none;
 93     text-align: left;
 94     max-height: 300px;
 95     overflow-y: scroll;
 96     overflow-x: hidden;
 97 }
 98 .dd-item{
 99     display: block;
100     height: 30px;
101     line-height: 30px;
102     padding-left: 5px;
103     border-bottom: 1px solid steelblue;
104     font-size: 13px;
105     z-index: 8;
106     overflow: hidden;
107 }
108 .dd-item .dd-v{
109     width: 0px;
110     height: 0px;
111     display: none;
112 }
113 .dd-item .dd-k{
114     z-index: 8;
115     padding-left: 15px;
116 }
117 .dd-item:first-child{
118     border-top: 1px solid steelblue;
119 }
120 .dd-item:last-child{
121     border-bottom: none;
122 }
123 .dd-select .on{
124     background-color: steelblue\9;
125 }
126 .dd-item:hover::before,.dd-item:hover before{
127     content:'\2714';
128     position: absolute;
129     left: 0px;
130     color: #79a979
131     z-index: 9;
132     font-size: 16px;
133     padding-right: 3px;
134     padding-left: 2px;
135     background-color: #fff;
136 }
137 .dd-select .on::before,.dd-select .on before{
138     content:'\2714';
139     position: absolute;
140     left: 0px;
141     color: green;
142     z-index: 9;
143     font-size: 16px;
144     padding-right: 3px;
145     padding-left: 2px;
146     background-color: #fff;
147 }
148 .dd-item:hover{
149     cursor: pointer;
150     background-color: #ccc;
151 }
152 .dropdown-container .dropdown-opt{
153     width:100%;
154     text-align: center;
155     position: absolute;
156     left: -1px;
157     bottom: -30px;
158     padding: 0px;
159     border-left: 1px solid steelblue;
160     border-bottom: 1px solid steelblue;
161     border-right: 1px solid steelblue;
162     box-sizing: content-box;
163 }
164 .dropdown-container .dd-btn{
165     color: #333;
166     height: 28px !important;
167     display: inline-block;
168     background-color: #e6e6e6;
169     border-color: #adadad;
170     user-select: none;
171     background-image: none;
172     border: 1px solid transparent;
173     border-radius: 4px;
174     margin: 0px 15px;
175 }
176 .dropdown-container .dd-btn:hover{
177     color:#fff;
178     background-color: steelblue;
179 }
180 /* scrollbar */
181 .dropdown-container ::-webkit-scrollbar {  width: 5px;  height: 10px;  }  
182 .dropdown-container ::-webkit-scrollbar-track,  
183 .dropdown-container ::-webkit-scrollbar-thumb {  border-radius: 999px;  border: 5px solid transparent;  }  
184 .dropdown-container ::-webkit-scrollbar-track {  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  }  
185 .dropdown-container ::-webkit-scrollbar-thumb {  min-height: 20px;  background-clip: content-box;  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  }  
186 .dropdown-container ::-webkit-scrollbar-corner {  background: transparent;  }複製程式碼

3.Jquery外掛

;(function ($,window,document,undefined) {
    var _pluginName="jqDropdown";

    var defaults = {
        items:[]
    };

    var parm=[];

    //es5 filter hack
    if (!Array.prototype.filter){
          Array.prototype.filter = function(fun){
            var len = this.length;
            if (typeof fun != "function") throw new TypeError(); 
             var res = new Array();
            var _arg = arguments[1];
            for (var i = 0; i < len; i++){
                  if (i in this){
                    var val = this[i];
                    if (fun.call(_arg, val, i, this)) res.push(val);
                  }
            } 
             return res;
          };
    }
    if(!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elem, startFrom) {
            var startFrom = startFrom || 0;
            if (startFrom > this.length) return -1;

            for (var i = 0; i < this.length; i++) {
                if (this[i] == elem && startFrom <= i) {
                    return i;
                } else if (this[i] == elem && startFrom > i) {
                    return -1;
                }
            }
            return -1;
        }
    }
    var init = function (o,opts,okFn,cancelFn) {
        var _panel=$(o);
        var _ul=_panel.find(".dd-select:eq(0)");

        function createDropItems(items,p){
            p=p||[];
            _ul.empty();
            var _curretVal=$(".iptdiplay").val();
            for(var i=0,len=items.length;i<len;i++){
                var _d=items[i];
                var _li='<li class="{{DC}}"> <span class="dd-v">{{DV}}</span><span class="dd-k">{{DK}}</span></li>';
                _ul.append(_li.replace(/{{DV}}/g, _d.val).replace(/{{DK}}/g,_d.name).replace(/{{DC}}/g,p.indexOf(_d.val.toString())>-1?'dd-item on':'dd-item'));
            }

            _panel.find('.dd-item').click(function(e){
                var $this=$(this);
                var _k_= $this.find('.dd-k:eq(0)').text()
                var _v_= $this.find('.dd-v:eq(0)').text();
                if($this.hasClass('on')){
                    parm=parm.filter(function(t){ return t!=_v_; });
                    $this.removeClass('on');
                }else{
                    parm.push(_v_);
                    $this.addClass('on');
                }

                var disArr=[];
                for(var i=0,len=items.length;i<len;i++){
                    var _d=items[i];
                    if(parm.indexOf(_d.val.toString())>-1) disArr.push(_d.name);
                }
                $(".iptdiplay").val(disArr.join('|'));
            });
        };

        //init to build dropdown items
        createDropItems(opts.items||[]);

        function toggleDrop(){

            $(".dropdown-panel").slideToggle();
        };

        
        //search
        $(".iptsearch").bind("input propertychange",function(e){
            if(!e) return;
            var _sk=e.currentTarget.value;
            var _items=opts.items||[];
            createDropItems(_items.filter(function(d){

                return d.name.indexOf(_sk)>-1; 
            }),parm);
        });

        //Toggle dropdown
        $(".dropdown-display").click(function(){

            toggleDrop();
        });

        //OK button event
        $(".dropdown-opt button.ok").click(function(){
            toggleDrop();
            okFn&&okFn.apply(this,[parm]);
        });

        //Cancel button event
        $(".dropdown-opt button.cancel").click(function(){

            toggleDrop();
            cancelFn&&cancelFn.call(this);
        });
    };

    $.fn[_pluginName] = function (options,okFn,cancelFn) {

        var options = $.extend(defaults, options);
        return this.each(function () {

            init(this,options,okFn,cancelFn);
        });
    }
})(jQuery,window,document);複製程式碼

4.頁面呼叫示例

<script>

    var data=[
      { name:'http://58.100.3.12',val:1 },
      { name:'http://44.168.4.13',val:2 },
      { name:'http://192.168.2.1/sdfsf/234234/234/2/34/23',val:3 },
      { name:'http://220.199.5.14',val:4 },
      { name:'http://127.1.62.15',val:5 },
      { name:'http://127.1.62.15',val:6 },
      { name:'http://127.1.62.15',val:7 },
      { name:'http://127.1.62.15',val:8 },
      { name:'http://127.1.62.15',val:9 },
      { name:'http://127.1.62.15',val:10 },
      { name:'http://127.1.62.15',val:11 },
      { name:'http://127.1.62.15',val:12 },
      { name:'http://127.1.62.15',val:13 },
      { name:'http://127.1.62.15',val:14},
      { name:'http://127.1.62.15',val:15 },
      { name:'http://127.1.62.15',val:16 },
      { name:'http://127.1.62.15',val:17 },
      { name:'http://127.1.62.15',val:18 },
      { name:'http://127.1.62.15',val:19 },
      { name:'http://127.1.62.15',val:20 },
      { name:'http://127.1.62.15',val:21 },
      { name:'http://127.1.62.15',val:22 },
      { name:'http://127.1.62.15',val:23 },
      { name:'http://127.1.62.15',val:24 },
      { name:'http://127.1.62.15',val:25 },
      { name:'http://127.1.62.15',val:26 },
      { name:'http://127.1.62.15',val:27 },
      { name:'http://127.1.62.15',val:28 },
      { name:'http://127.1.62.15',val:29 }
    ];

    $("#demo").jqDropdown({ items:data },function(e){

      console.dir(e);
    },function(){

      console.log('canceled by user !');
    });

  </script>複製程式碼

5.輸出


【原創】


相關文章