zoukankan      html  css  js  c++  java
  • 如何使用外部插件picker

      近日有需求做一个职业选择弹框,在网上搜了半天也没合适的;

    暴躁大佬协助我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()
        })
        
       
    }
  • 相关阅读:
    G450 Ubuntu14 无线网卡解决
    USB设备不能用。提示Windows 无法启动这个硬件设备。 (代码 19)
    帮你选处理器:CPU T9500-p9500-T9400-T9300-p8700对比分析!
    全球各大运营商黑莓ROM官网下载链接汇总
    查看80端口被占用的方法(IIS、apmserv、system)
    Windows 2003 服务器安全设置-批处理 (附参考链接)
    解决Windows时间同步失败问题!系统时间同步设置!
    WinHTTP Web Proxy Auto-Discovery Service
    关于“未使用GUID分区表”无法安装的解决方案
    DataGridView使用技巧六:冻结列或行
  • 原文地址:https://www.cnblogs.com/myfate/p/10876791.html
Copyright © 2011-2022 走看看