首页>>表单>>带图片的select多选框美化(2019-05-29)

带图片的select多选框美化

带图片的select多选框美化
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <select name="work-condition" id="work-condition" class="form-control">  
  2.         <option value="1" icon="iw-way">Remote Location</option>  
  3.         <option value="2" icon="iw-crane">Work From Height</option>  
  4.         <option value="3" icon="iw-scope">Field Visit</option>  
  5.         <option value="4" icon="iw-excavator">Active Machinery</option>  
  6.         <option value="5" icon="iw-key">Some Overtime Required</option>  
  7.         <option value="6" icon="iw-warning">Hazardous Conditions</option>  
  8.         <option value="7" icon="iw-bag">Office Based</option>  
  9.         <option value="8" icon="iw-dozer">Active Machinery</option>  
  10.         <option value="9" icon="iw-pickup">Driving Required</option>  
  11.         <option value="10" icon="iw-hammer">Physical Demanding</option>  
  12.         <option value="11" icon="iw-drill">High Stress Situation</option>  
  13.         <option value="12" icon="iw-note">Shift Work</option>  
  14.         <option value="13" icon="iw-head">Long Shift</option>  
  15.         <option value="14" icon="iw-hammer-o">Heavy Lifting</option>  
  16.         <option value="15" icon="iw-hat">Inclement Weather</option>  
  17.         <option value="16" icon="iw-building">Relocation</option>  
  18.         <option value="17" icon="iw-tools">Demanding Deadline</option>  
  19.     </select>  

 

JavaScript Code
  1. class SelectBeauty {  
  2.     constructor(data)  
  3.     {  
  4.         this.el = data.el;  
  5.         this.placeholder = (typeof data.placeholder !== "undefined") ? data.placeholder : "Select Something";  
  6.         this.length = (typeof data.length !== "undefined") ? data.length : 3;  
  7.         this.max = (typeof data.max !== "undefined") ? data.max : false;  
  8.         this.selected = {};  
  9.         this.tempData = {};  
  10.         this.getTemporaryData();  
  11.         this.getHtml();  
  12.         this.hideSelect();  
  13.         this.renderView();  
  14.         this.buttonListener();  
  15.         this.toggleListener();  
  16.         this.selectListener();  
  17.     }  
  18.   
  19.     // get data from select  
  20.     getTemporaryData()  
  21.     {  
  22.         let _this = this;  
  23.   
  24.         $.each($(this.el).children(), function(i, r) {  
  25.             let el = $(r);  
  26.             let data = {  
  27.                 text: el.text(),  
  28.                 icon: el.attr('icon')  
  29.             }  
  30.             _this.tempData[el.attr('value')] = data;  
  31.         });  
  32.     }  
  33.   
  34.     // hide select with add attribute multiple  
  35.     hideSelect()  
  36.     {  
  37.         $(this.el).hide();  
  38.         $(this.el).attr('multiple', true);  
  39.     }  
  40.   
  41.     renderView()  
  42.     {  
  43.         $(this.el).parent().append(this.htmlBeauty);  
  44.     }  
  45.   
  46.     htmlData()  
  47.     {  
  48.         let html = '';  
  49.   
  50.         for(name in this.tempData) {  
  51.             html += `  
  52.                 <li>  
  53.                     <a href="#" data-value="${name}"><i class="iw ${this.tempData[name].icon}"></i> ${this.tempData[name].text}</a>  
  54.                 </li>  
  55.             `;  
  56.         }  
  57.   
  58.         return html;  
  59.     }  
  60.   
  61.     getHtml()  
  62.     {  
  63.         this.htmlBeauty = `<div class="select-beauty" data-instance="${this.el}">  
  64.             <button class="button-sb button-sb-block">${this.placeholder}</button>  
  65.             <ul class="hide">  
  66.                 ${this.htmlData()}  
  67.             </ul>  
  68.         </div>`;  
  69.     }  
  70.   
  71.     toggleListener()  
  72.     {  
  73.         let _this = this;  
  74.         $(document).click(function(ev) {  
  75.             let el = $('[data-instance="'+_this.el+'"] ul');  
  76.             el.addClass('hide');  
  77.         });  
  78.   
  79.         $('[data-instance="'+this.el+'"] ul').click(function(ev) {  
  80.             ev.stopPropagation();  
  81.         });  
  82.     }  
  83.   
  84.     buttonListener()  
  85.     {  
  86.         $(document).find('[data-instance="'+this.el+'"]').on('click', 'button', function(ev) {  
  87.             ev.preventDefault();  
  88.             ev.stopPropagation();  
  89.             $(this).next('ul').toggleClass('hide');  
  90.         });  
  91.     }  
  92.   
  93.     selectListener()  
  94.     {  
  95.         let _this = this;  
  96.         $(document).find('[data-instance="'+this.el+'"] ul').on('click', 'a', function(ev) {  
  97.             ev.stopPropagation();  
  98.             ev.preventDefault();  
  99.             let el = $(this);  
  100.             let id = el.attr('data-value');  
  101.             let parent = el.parent();  
  102.   
  103.             if(parent.hasClass('active')) {  
  104.                 delete _this.selected[id];  
  105.                 parent.removeClass('active');  
  106.             } else {  
  107.                 if(_this.max && _this.countObject(_this.selected) >= _this.max) return false;  
  108.                 _this.selected[id] = _this.tempData[id];  
  109.                 parent.addClass('active');  
  110.             }  
  111.             _this.filter();  
  112.         });  
  113.     }  
  114.   
  115.     countObject(obj)  
  116.     {  
  117.         return Object.keys(obj).length;  
  118.     }  
  119.   
  120.     filter()  
  121.     {  
  122.         let arr = [];  
  123.         let btnText = [];  
  124.         let btnElement = $('[data-instance="'+this.el+'"] button');  
  125.   
  126.         for(name in this.selected) {  
  127.             arr.push(name);  
  128.             btnText.push(this.selected[name].text);  
  129.         }  
  130.           
  131.         $(this.el).val(arr);  
  132.   
  133.         if(btnText.length < 1) {  
  134.             btnElement.text(this.placeholder);  
  135.         } else if(btnText.length > this.length) {  
  136.             btnElement.text("("+btnText.length+") Selected");  
  137.         } else {  
  138.             btnElement.text(btnText.join(', '));  
  139.         }  
  140.     }  
  141.   
  142.     reload()  
  143.     {  
  144.         this.selected = {};  
  145.         this.tempData = {};  
  146.         $(this.el).val([]);  
  147.         this.getTemporaryData();  
  148.         $(document).find('[data-instance="'+this.el+'"] ul').html('');  
  149.         $(document).find('[data-instance="'+this.el+'"] ul').html(this.htmlData());  
  150.     }  
  151. }  

 


原文地址:http://www.freejs.net/article_biaodan_783.html