189 lines
5.3 KiB
JavaScript
189 lines
5.3 KiB
JavaScript
/*!
|
||
|
||
@Name：layer mobile v2.0.0 弹层组件移动版
|
||
@Author：贤心
|
||
@Site：http://layer.layui.com/mobie/
|
||
@License：MIT
|
||
|
||
*/
|
||
|
||
layui.define(function(exports){
|
||
|
||
"use strict";
|
||
|
||
var win = window, doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){
|
||
return doc[query](s);
|
||
};
|
||
|
||
//默认配置
|
||
var config = {
|
||
type: 0
|
||
,shade: true
|
||
,shadeClose: true
|
||
,fixed: true
|
||
,anim: 'scale' //默认动画类型
|
||
};
|
||
|
||
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 = ['layui-m-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
|
||
? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3>'
|
||
: '';
|
||
}());
|
||
|
||
//按钮区域
|
||
var button = (function(){
|
||
typeof config.btn === 'string' && (config.btn = [config.btn]);
|
||
var btns = (config.btn || []).length, btndom;
|
||
if(btns === 0 || !config.btn){
|
||
return '';
|
||
}
|
||
btndom = '<span yes type="1">'+ config.btn[0] +'</span>'
|
||
if(btns === 2){
|
||
btndom = '<span no type="0">'+ config.btn[1] +'</span>' + btndom;
|
||
}
|
||
return '<div class="layui-m-layerbtn">'+ btndom + '</div>';
|
||
}());
|
||
|
||
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 === 2){
|
||
config.content = '<i></i><i class="layui-m-layerload"></i><i></i><p>'+ (config.content||'') +'</p>';
|
||
}
|
||
|
||
if(config.skin) config.anim = 'up';
|
||
if(config.skin === 'msg') config.shade = false;
|
||
|
||
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="layui-m-layershade"></div>' : '')
|
||
+'<div class="layui-m-layermain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||
+'<div class="layui-m-layersection">'
|
||
+'<div class="layui-m-layerchild '+ (config.skin ? 'layui-m-layer-' + config.skin + ' ' : '') + (config.className ? config.className : '') + ' ' + (config.anim ? 'layui-m-anim-' + config.anim : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||
+ title
|
||
+'<div class="layui-m-layercont">'+ config.content +'</div>'
|
||
+ button
|
||
+'</div>'
|
||
+'</div>'
|
||
+'</div>';
|
||
|
||
if(!config.type || config.type === 2){
|
||
var dialogs = doc[claname](classs[0] + config.type), dialen = dialogs.length;
|
||
if(dialen >= 1){
|
||
layer.close(dialogs[0].getAttribute('index'))
|
||
}
|
||
}
|
||
|
||
document.body.appendChild(layerbox);
|
||
var elem = that.elem = S('#'+that.id)[0];
|
||
config.success && config.success(elem);
|
||
|
||
that.index = index++;
|
||
that.action(config, elem);
|
||
};
|
||
|
||
Layer.prototype.action = function(config, elem){
|
||
var that = this;
|
||
|
||
//自动关闭
|
||
if(config.time){
|
||
ready.timer[that.index] = setTimeout(function(){
|
||
layer.close(that.index);
|
||
}, config.time*1000);
|
||
}
|
||
|
||
//确认取消
|
||
var btn = function(){
|
||
var type = this.getAttribute('type');
|
||
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]('layui-m-layerbtn')[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]('layui-m-layershade')[0];
|
||
ready.touch(shade, function(){
|
||
layer.close(that.index, config.end);
|
||
});
|
||
}
|
||
|
||
config.end && (ready.end[that.index] = config.end);
|
||
};
|
||
|
||
var layer = {
|
||
v: '2.0 m',
|
||
index: index,
|
||
|
||
//核心方法
|
||
open: function(options){
|
||
var o = new Layer(options || {});
|
||
return o.index;
|
||
},
|
||
|
||
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-mobile', layer);
|
||
|
||
}); |