近日有需求做一个职业选择弹框,在网上搜了半天也没合适的;
暴躁大佬协助我DIY一个插件,直接使用,顺滑流畅,随心所欲!特别鸣谢@一样菜
不多BB了,直接撸代码:
引用写在上面:
/* 更改职业 */ selectOccupation : function() { // 展示类型 var ms = new MutliSelectorUI(App.dataCode, function (data) { App.OccupationTpCd = data.code; App.OCCUPATION_NAME = data.name; var str = data.name; if (str.length>14) { str = str.substr(0,14)+"..."; } $("#selectOccupation").val(str); $("#OccupationVal").val(data.code); ms.hideDialog(); }); if(App.version) { ms.showDialog(); }else{ ms.hideDialog(); } },
function MutliSelectorUI(data, fn){ const data_list = data; var panelBg = document.createElement('div') panelBg.className="msu_panel_background" panelBg.setAttribute('id','msu_panel_background') document.body.appendChild(panelBg) var $panel = $('#msu_panel_background') $panel.css({ display: 'none' }) this.showDialog = function(){ $panel.show() $("#pageB").attr({"data-btnLeft":"false||", "data-btnRight":"false||"}); Fw.showPageArea($("#pageB"), [ $(".page") ], true); } this.hideDialog = function(){ $panel.hide() $("#pageB").attr({"data-btnLeft":"true|返回|App.backPerson()", "data-btnRight":"true|保存|App.saveOccupation()"}) Fw.showPageArea($("#pageB"), [ $(".page") ], true) } let self = this $panel.empty() $panel_box = $('<div class="msu_panel_box"></div>') $panel_box_cancel = $('<div class="msu_panel_cencels">取 消</div>') $panel.append($panel_box) $panel.append($panel_box_cancel) this.renderMainRow = function(){ let indx = 0; $panel_box.empty() for(let item of data_list){ console.log(JSON.stringify(item.classes)) var $row_item = $('<div class="msu_main_row" code="'+item.code+'" name="'+item.name+'" isexpend="false"><div class="msu_text">'+item.name+'</div><div class="msu_arrow right"></div></div>') $panel_box.append($row_item) if(item.classes.length == 0){ $row_item.find('.msu_arrow').hide() } indx++ if(indx == data_list.length){ $row_item.css({ borderBottom: '0' }) } } } // init this.renderMainRow() $panel_box_cancel.on('click',function(){ self.hideDialog() }) $panel.on('click','.msu_main_row',function () { let _code = $(this).attr('code') let _name = $(this).attr('name') let isexpend = $(this).attr('isexpend') let classes = [] for(let dt of data_list){ if(dt.code == _code){ classes = dt.classes break; } } if(classes.length == 0){ if(typeof fn === 'function'){ fn({ code:_code, name: _name }) } return; } $panel_box.empty(); var $subitem = $('<div class="msu_back_btn"><div class="msu_arrow left"></div><div class="msu_text">'+_name+'</div></div>') $panel_box.append($subitem) let indx = 0 for(var cls of classes){ var $subitem = $('<div class="msu_sub_row" code="'+cls.code+'" name="'+cls.name+'">'+cls.name+'</div>') $panel_box.append($subitem); indx++ if(indx == classes.length){ $subitem.css({ borderBottom: '0' }) } } }) $panel.on('click','.msu_sub_row',function () { var _code = $(this).attr('code') var _name = $(this).attr('name') if(typeof fn === 'function'){ fn({ code:_code, name: _name }) } }) $panel.on('click','.msu_back_btn',function () { self.renderMainRow() }) }