mbui.define([], function (exports) { var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function (s) { return doc[query](s); }; var template = { warning: function (text) { //警告提示 return `
${text}
`; }, error: function (text) { //失败提示 return `
${text}
`; }, toast: function (text) { //轻提示 return `
${text}
`; }, loading: function (text) { //轻提示 return `
${text}
`; }, success: function (text) { //轻提示 return `
${text}
`; } } //默认配置 var config = { type: 1, shade: true, shadeClose: false, fixed: true }; var ready = { extend: function (obj) { var newobj = JSON.parse(JSON.stringify(config)); for (var i in obj) { newobj[i] = obj[i]; } return newobj; }, timer: {}, end: {} }; //点触事件 ready.touch = function (elem, fn) { elem.addEventListener('click', function (e) { fn.call(this, e); }, false); }; var index = 0, classs = ['mbui-layer'], Layer = function (options) { var that = this; that.config = ready.extend(options); that.view(); }; Layer.prototype.view = function () { var that = this, config = that.config, layerbox = doc.createElement('div'); that.id = layerbox.id = classs[0] + index; layerbox.setAttribute('class', classs[0] + ' ' + classs[0] + (config.type || 0)); layerbox.setAttribute('index', index); //标题区域 var title = (function () { var titype = typeof config.title === 'object'; return config.title ? '' : ''; }()); //按钮区域 var button = (function () { typeof config.btn === 'string' && (config.btn = [config.btn]); var btns = (config.btn || []).length, btndom; if (btns === 0 || !config.btn) { return ''; } btndom = '' if (btns === 2) { btndom = '' + config.btn[1] + ''; } return ''; }()); if (!config.fixed) { config.top = config.hasOwnProperty('top') ? config.top : 100; config.style = config.style || ''; config.style += ' top:' + (doc.body.scrollTop + config.top) + 'px'; } if (config.type === 0) { config.shade = false; let content = template[config.template]; layerbox.innerHTML = content(config.content); } if (config.type === 2) { config.content = '
'; } if (config.type === 3) { config.className = 'modal-view top'; config.content = '
'; } if (config.type === 4) { config.className = 'modal-actionsheet bottom'; } if (config.type === 5) { config.className = 'modal-view top'; } if (config.type > 0) { layerbox.innerHTML = (config.shade ? '
' : '') + '
' + '' + '
'; } document.body.appendChild(layerbox); var elem = that.elem = S('#' + that.id)[0]; config.success && config.success(elem,index); that.index = index++; that.action(config, elem); }; Layer.prototype.action = function (config, elem) { var that = this; //自动关闭 if (config.time && config.time > 0) { ready.timer[that.index] = setTimeout(function () { layer.close(that.index); }, config.time * 1000); } //确认取消 var btn = function () { var type = this.getAttribute('types'); if (type == 0) { config.no && config.no(); layer.close(that.index); } else { config.yes ? config.yes(that.index) : layer.close(that.index); } }; if (config.btn) { var btns = elem[claname]('modal-footer')[0].children, btnlen = btns.length; for (var ii = 0; ii < btnlen; ii++) { ready.touch(btns[ii], btn); } } //点遮罩关闭 if (config.shade && config.shadeClose) { var shade = elem[claname]('mbui-layershade')[0]; ready.touch(shade, function () { layer.close(that.index, config.end); }); } config.end && (ready.end[that.index] = config.end); }; var layer = { v: '1.0', index: index, //核心方法 open: function (options) { var o = new Layer(options || {}); return o.index; }, alert: function (txt) { layer.open({ type: 1, title: '提示', content: txt, btn: ['确定'] }); }, confirm: function (txt, fun) { layer.open({ type: 1, title: '温馨提示', content: txt, btn: ['确定', '取消'], yes: function (index) { fun ? fun(index) : layer.close(index); } }); }, prompt: function (title,fun,txt) { layer.open({ type: 2, title: title, content: txt, btn: ['确定', '取消'], yes: function (index) { let val = $('#prompt' + index).val(); fun ? fun(val,index) : layer.close(index); } }); }, textarea: function (title,fun,txt) { layer.open({ type: 3, title: title, content: txt, btn: ['确定', '取消'], yes: function (index) { let val = $('#textarea' + index).val(); fun ? fun(val,index) : layer.close(index); } }); }, msg: function (txt = '', time = 3, template = 'toast') { let msg = layer.open({ type: 0, content: txt, template: template, time: time }); return msg; }, success: function (txt) { layer.msg(txt, 3, 'success'); }, warning: function (txt) { layer.msg(txt, 3, 'warning'); }, error: function (txt) { layer.msg(txt, 3, 'error'); }, loading: function (txt) { let loading = layer.msg(txt, 0, 'loading'); return loading; }, photo: function (url) { var $image = $('
'); $('body').append($image); $image.fadeIn(); $image.click(function () { $(this).fadeOut(function () { $(this).remove(); }); }); }, close: function (index) { var ibox = S('#' + classs[0] + index)[0]; if (!ibox) return; ibox.innerHTML = ''; doc.body.removeChild(ibox); clearTimeout(ready.timer[index]); delete ready.timer[index]; typeof ready.end[index] === 'function' && ready.end[index](); delete ready.end[index]; }, //关闭所有layer层 closeAll: function () { var boxs = doc[claname](classs[0]); for (var i = 0, len = boxs.length; i < len; i++) { layer.close((boxs[0].getAttribute('index') | 0)); } } }; // 输出接口 exports('layer', layer); });