/**
* 弹出选择列表插件
* 此组件依赖 listpcker ,请在页面中先引入 mui.listpicker.css + mui.listpicker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var panelBuffer = '
';
var pickerBuffer = '';
//定义弹出选择器类
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) {
self.hide();
if (self.callback) {
self.callback(self.getSelectedItems());
}
}, false);
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createListPicker();
},
_createListPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + '%';
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var picker = $.dom(pickerBuffer)[0];
picker.style.width = width;
self.body.appendChild(picker);
$(picker).listpicker();
self.pickers.push(picker);
picker.addEventListener('change', function(event) {
var nextPicker = this.nextSibling;
if (nextPicker && nextPicker.__listpicker_inited) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPicker.setItems(preItem.children);
}
}, 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();
self.panel.classList.add($.className('active'));
},
//隐藏
hide: function() {
var self = this;
self.panel.classList.remove($.className('active'));
self.mask.close();
}
});
})(mui);