y***@gmail.com
y***@gmail.com
  • 发布:2016-04-28 15:03
  • 更新:2016-04-28 15:03
  • 阅读:7749

修改PopPicker 增加动态级联能力。

分类:MUI
mui

主要思路是增加一个change入口, 当选项发生改变时可以触发自己的级联逻辑。

var province = new mui.PopPicker(  
            {layer: 3,  
                //change  
                changeFn:function(even){  
                    //change 自己的逻辑  
                                       var nextPickerElement = this.nextSibling;  
                    if (nextPickerElement && nextPickerElement.picker) {  
                        var eventData = event.detail || {};  
                        var preItem = eventData.item || {};  
                        if (preItem.type == 'province'){  
                            nextPickerElement.picker.setItems(getCascadeData("cities", preItem.value));  
                        } else if (preItem.type == 'cities'){  
                            nextPickerElement.picker.setItems(getCascadeData("counties", preItem.value));  
                        }  
                    }  
                }  
            });
var PopPicker = $.PopPicker = $.Class.extend({  
        //构造函数  
        init: function(options) {  
            var self = this;  
            self.options = options || {};  
            self.options.buttons = self.options.buttons || ['取消', '确定'];  
            self.panel = $.dom(panelBuffer)[0];  
            document.body.appendChild(self.panel);  
            self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');  
            self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');  
            self.body = self.panel.querySelector('.mui-poppicker-body');  
            self.mask = $.createMask();  
            self.cancel.innerText = self.options.buttons[0];  
            self.ok.innerText = self.options.buttons[1];  
            self.cancel.addEventListener('tap', function(event) {  
                self.hide();  
            }, false);  
            self.ok.addEventListener('tap', function(event) {  
                if (self.callback) {  
                    var rs = self.callback(self.getSelectedItems());  
                    if (rs !== false) {  
                        self.hide();  
                    }  
                }  
            }, false);  

            **self.changeFn = self.options.changeFn || function(event) {  
                var nextPickerElement = this.nextSibling;  
                if (nextPickerElement && nextPickerElement.picker) {  
                    var eventData = event.detail || {};  
                    var preItem = eventData.item || {};  
                    nextPickerElement.picker.setItems(preItem.children);  
                }  
            };**  

            self.mask[0].addEventListener('tap', function() {  
                self.hide();  
            }, false);  
            self._createPicker();  
            //防止滚动穿透  
            self.panel.addEventListener('touchstart', function(event) {  
                event.preventDefault();  
            }, false);  
            self.panel.addEventListener('touchmove', function(event) {  
                event.preventDefault();  
            }, false);  
        },  
        _createPicker: function() {  
            var self = this;  
            var layer = self.options.layer || 1;  
            var width = (100 / layer) + '%';  
            self.pickers = [];  
            for (var i = 1; i <= layer; i++) {  
                var pickerElement = $.dom(pickerBuffer)[0];  
                pickerElement.style.width = width;  
                self.body.appendChild(pickerElement);  
                var picker = $(pickerElement).picker();  
                self.pickers.push(picker);  
                pickerElement.addEventListener('change', self.changeFn, false);  
            }  
        },  
        //填充数据  
        setData: function(data) {  
            var self = this;  
            data = data || [];  
            self.pickers[0].setItems(data);  
        },  
        //获取选中的项(数组)  
        getSelectedItems: function() {  
            var self = this;  
            var items = [];  
            for (var i in self.pickers) {  
                var picker = self.pickers[i];  
                items.push(picker.getSelectedItem() || {});  
            }  
            return items;  
        },  
        //显示  
        show: function(callback) {  
            var self = this;  
            self.callback = callback;  
            self.mask.show();  
            document.body.classList.add($.className('poppicker-active-for-page'));  
            self.panel.classList.add($.className('active'));  
            //处理物理返回键  
            self.__back = $.back;  
            $.back = function() {  
                self.hide();  
            };  
        },  
        //隐藏  
        hide: function() {  
            var self = this;  
            if (self.disposed) return;  
            self.panel.classList.remove($.className('active'));  
            self.mask.close();  
            document.body.classList.remove($.className('poppicker-active-for-page'));  
            //处理物理返回键  
            $.back=self.__back;  
        },  
        dispose: function() {  
            var self = this;  
            self.hide();  
            setTimeout(function() {  
                self.panel.parentNode.removeChild(self.panel);  
                for (var name in self) {  
                    self[name] = null;  
                    delete self[name];  
                };  
                self.disposed = true;  
            }, 300);  
        }  
    });
2 关注 分享
wobenwuming wuhy

要回复文章请先登录注册

wuhy

wuhy

回复 6***@qq.com :
不知道你还需不需要

pickerElement.addEventListener('change', self.options.changeFn(event), false);

将这个监听事件改为你的
2017-09-15 00:06
6***@qq.com

6***@qq.com

给个完整的实例啊,我放进去 不起作用呀 ?
2017-08-10 13:20