mirror of https://github.com/layui/layer
增加layer移动版
parent
0f4ea48137
commit
465f0f4e60
|
@ -0,0 +1,14 @@
|
|||
|
||||
## layer mobole
|
||||
layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用。
|
||||
|
||||
[文档与演示](http://sentsin.com/layui/layer/)
|
||||
|
||||
1. 无需依赖任何库,只加载layer.m.js即可
|
||||
2. 小巧玲珑,性能卓越、柔情似水…
|
||||
3. 具备无以伦比的自适应功能
|
||||
4. 灵活的皮肤自定义支撑,充分确保弹层风格多样化
|
||||
5. 丰富、科学的接口,让弹弹弹层无所不能
|
||||
|
||||
## 备注
|
||||
[官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html)
|
|
@ -0,0 +1,194 @@
|
|||
/****************************************
|
||||
|
||||
@Name:layer v1.0 弹层组件移动版
|
||||
@Author:贤心
|
||||
@Date:2014-08-24
|
||||
@Copyright:Sentsin Xu(贤心)
|
||||
@官网:http://sentsin.com/layui/layer
|
||||
@License:MIT
|
||||
|
||||
*/
|
||||
|
||||
;!function(win){
|
||||
"use strict";
|
||||
|
||||
var path = '' //所在路径,如果非模块加载不用配置
|
||||
? path : document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0];
|
||||
|
||||
var doc = document, elem = 'createElement', byid = 'getElementById', claname = 'getElementsByClassName';
|
||||
|
||||
document.head.appendChild((function(){
|
||||
var link = doc[elem]('link');
|
||||
link.href = path + 'need/layer.css';
|
||||
link.type="text/css";
|
||||
link.rel="styleSheet"
|
||||
link.id = 'layermcss';
|
||||
return link;
|
||||
}()));
|
||||
|
||||
var config = {
|
||||
shade: true,
|
||||
shadeClose: true,
|
||||
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: {}
|
||||
};
|
||||
|
||||
var index = 0, classs = ['layermbox'];
|
||||
|
||||
function Layer(options){
|
||||
var that = this;
|
||||
that.config = ready.extend(options);
|
||||
that.view();
|
||||
};
|
||||
|
||||
Layer.prototype.view = function(){
|
||||
var that = this, config = that.config, layerbox = doc[elem]('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><button class="layermend">×</button>'
|
||||
: '';
|
||||
}());
|
||||
|
||||
var button = (function(){
|
||||
var btns = (config.btn || []).length, btndom;
|
||||
if(btns === 0 || !config.btn){
|
||||
return '';
|
||||
}
|
||||
btndom = '<span type="1">'+ config.btn[0] +'</span>'
|
||||
if(btns === 2){
|
||||
btndom = '<span type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
}
|
||||
return '<div class="layermbtn">'+ 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';
|
||||
}
|
||||
|
||||
layerbox.innerHTML = (config.shade ? '<div class="laymshade"></div>' : '')
|
||||
+'<div class="layermmain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||||
+'<section>'
|
||||
+'<div class="layermchild" '+ ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||||
+ title
|
||||
+'<div class="layermcont">'+ (config.content||' ') +'</div>'
|
||||
+ button
|
||||
+'</div>'
|
||||
+'</section>'
|
||||
+'</div>';
|
||||
|
||||
if(!config.type){
|
||||
var dialogs = doc[claname](classs[0]+'0'), dialen = dialogs.length;
|
||||
if(dialen >= 1){
|
||||
layer.close(dialogs[0].getAttribute('index'))
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(layerbox);
|
||||
|
||||
setTimeout(function(){
|
||||
try{
|
||||
doc[byid](that.id).classList.add('layermshow');
|
||||
}catch(e){
|
||||
return;
|
||||
}
|
||||
config.success && config.success(doc[byid](that.id));
|
||||
}, 1);
|
||||
|
||||
that.index = index++;
|
||||
that.action(config);
|
||||
};
|
||||
|
||||
Layer.prototype.action = function(config){
|
||||
var that = this;
|
||||
|
||||
//自动关闭
|
||||
if(config.time){
|
||||
ready.timer[that.index] = setTimeout(function(){
|
||||
layer.close(that.index);
|
||||
}, config.time*1000);
|
||||
}
|
||||
|
||||
//关闭按钮
|
||||
if(config.title){
|
||||
doc[byid](that.id)[claname]('layermend')[0].onclick = function(){
|
||||
config.cancel && config.cancel();
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
}
|
||||
|
||||
//确认取消
|
||||
if(config.btn){
|
||||
doc[byid](that.id)[claname]('layermbtn')[0].onclick = function(event){
|
||||
var type = event.target.getAttribute('type');
|
||||
if(type == 0){
|
||||
config.no && config.no();
|
||||
layer.close(that.index, config.end);
|
||||
} else {
|
||||
config.yes ? config.yes(that.index) : layer.close(that.index, config.end);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//点遮罩关闭
|
||||
if(config.shade && config.shadeClose){
|
||||
var shade = doc[byid](that.id)[claname]('laymshade')[0];
|
||||
shade.onclick = function(){
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
shade.ontouchmove = function(){
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var layer = {
|
||||
v: '1.0',
|
||||
index: index,
|
||||
|
||||
//核心方法
|
||||
open: function(options){
|
||||
var o = new Layer(options || {});
|
||||
return o.index;
|
||||
},
|
||||
|
||||
close: function(index, callback){
|
||||
var ibox = doc[byid](classs[0]+index);
|
||||
if(!ibox) return;
|
||||
ibox.innerHTML = '';
|
||||
doc.body.removeChild(ibox);
|
||||
clearTimeout(ready.timer[index]);
|
||||
delete ready.timer[index];
|
||||
callback && callback();
|
||||
},
|
||||
|
||||
//关闭所有layer层
|
||||
closeAll: function(){
|
||||
var boxs = document.getElementsByClassName(classs[0]);
|
||||
for(var i = 0, len = boxs.length; i < len; i++){
|
||||
layer.close(boxs[i].getAttribute('index'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
"function" === typeof define ? define(function() {
|
||||
return layer;
|
||||
}) : win.layer = layer;
|
||||
|
||||
}(window);
|
|
@ -0,0 +1,2 @@
|
|||
/* layer-v1.0 弹层移动版 By 贤心 2014-08-24 http://sentsin.com/layui/layer */
|
||||
;!function(a){"use strict";function k(a){var b=this;b.config=h.extend(a),b.view()}var g,h,i,j,l,b=document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0],c=document,d="createElement",e="getElementById",f="getElementsByClassName";document.head.appendChild(function(){var a=c[d]("link");return a.href=b+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}()),g={shade:!0,shadeClose:!0,fixed:!0},h={extend:function(a){var c,b=JSON.parse(JSON.stringify(g));for(c in a)b[c]=a[c];return b},timer:{}},i=0,j=["layermbox"],k.prototype.view=function(){var h,k,m,n,a=this,b=a.config,g=c[d]("div");a.id=g.id=j[0]+i,g.setAttribute("class",j[0]+" "+j[0]+(b.type||0)),g.setAttribute("index",i),h=function(){var a="object"==typeof b.title;return b.title?'<h3 style="'+(a?b.title[1]:"")+'">'+(a?b.title[0]:b.title)+'</h3><button class="layermend">×</button>':""}(),k=function(){var c,a=(b.btn||[]).length;return 0!==a&&b.btn?(c='<span type="1">'+b.btn[0]+"</span>",2===a&&(c='<span type="0">'+b.btn[1]+"</span>"+c),'<div class="layermbtn">'+c+"</div>"):""}(),b.fixed||(b.top=b.hasOwnProperty("top")?b.top:100,b.style=b.style||"",b.style+=" top:"+(c.body.scrollTop+b.top)+"px"),g.innerHTML=(b.shade?'<div class="laymshade"></div>':"")+'<div class="layermmain" '+(b.fixed?"":'style="position:static;"')+">"+"<section>"+'<div class="layermchild" '+(b.style?'style="'+b.style+'"':"")+">"+h+'<div class="layermcont">'+(b.content||" ")+"</div>"+k+"</div>"+"</section>"+"</div>",b.type||(m=c[f](j[0]+"0"),n=m.length,n>=1&&l.close(m[0].getAttribute("index"))),document.body.appendChild(g),setTimeout(function(){try{c[e](a.id).classList.add("layermshow")}catch(d){return}b.success&&b.success(c[e](a.id))},1),a.index=i++,a.action(b)},k.prototype.action=function(a){var d,b=this;a.time&&(h.timer[b.index]=setTimeout(function(){l.close(b.index)},1e3*a.time)),a.title&&(c[e](b.id)[f]("layermend")[0].onclick=function(){a.cancel&&a.cancel(),l.close(b.index,a.end)}),a.btn&&(c[e](b.id)[f]("layermbtn")[0].onclick=function(c){var d=c.target.getAttribute("type");0==d?(a.no&&a.no(),l.close(b.index,a.end)):a.yes?a.yes(b.index):l.close(b.index,a.end)}),a.shade&&a.shadeClose&&(d=c[e](b.id)[f]("laymshade")[0],d.onclick=function(){l.close(b.index,a.end)},d.ontouchmove=function(){l.close(b.index,a.end)})},l={v:"1.0",index:i,open:function(a){var b=new k(a||{});return b.index},close:function(a,b){var d=c[e](j[0]+a);d&&(d.innerHTML="",c.body.removeChild(d),clearTimeout(h.timer[a]),delete h.timer[a],b&&b())},closeAll:function(){var b,c,a=document.getElementsByClassName(j[0]);for(b=0,c=a.length;c>b;b++)l.close(a[b].getAttribute("index"))}},"function"==typeof define?define(function(){return l}):a.layer=l}(window);
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue