github
/
layer
mirror of https://github.com/layui/layer
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

layer mobile 1.2

pull/3/head
古铜 2014-09-24 13:37:18 +08:00
commit aa881dc466
4 changed files with 270 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
mobile/README.md Normal file
View File

@ -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)

210
mobile/layer.m.dev.js Normal file
View File

@ -0,0 +1,210 @@
/****************************************
@Name：layer mobile v1.2 弹层组件移动版
@Author：贤心
@Date：2014-09-24
@Copyright：Sentsin Xu(贤心)
@官网：http://sentsin.com/layui/layer
@License：MIT
*/
;!function(win){
"use strict";
var path = ''; //所在路径，如果非模块加载不用配置
path = path ? path : document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0];
var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){
return doc[query](s);
};
//插入css
document.head.appendChild((function(){
var link = doc.createElement('link');
link.href = path + 'need/layer.css';
link.type = 'text/css';
link.rel = 'styleSheet'
link.id = 'layermcss';
return link;
}()));
//默认配置
var config = {
type: 0,
shade: true,
shadeClose: true,
fixed: true,
anim: true
};
win.ready = {
extend: function(obj){
var newobj = JSON.parse(JSON.stringify(config));
for(var i in obj){
newobj[i] = obj[i];
}
return newobj;
},
timer: {},
end: {}
};
var index = 0, classs = ['layermbox'], 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><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';
}
if(config.type === 2){
config.content = '<i></i><i class="laymloadtwo"></i><i></i><div>' + (config.content||'') + '</div>';
}
layerbox.innerHTML = (config.shade ? '<div class="laymshade"></div>' : '')
+'<div class="layermmain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
+'<section>'
+'<div class="layermchild '+ ((!config.type && !config.shade) ? 'layermborder ' : '') + (config.anim ? 'layermanim' : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
+ title
+'<div class="layermcont">'+ config.content +'</div>'
+ button
+'</div>'
+'</section>'
+'</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];
setTimeout(function(){
try{
elem.className = elem.className + ' layermshow';
}catch(e){
return;
}
config.success && config.success(elem);
}, 1);
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);
}
//关闭按钮
if(config.title){
elem[claname]('layermend')[0].onclick = function(){
config.cancel && config.cancel();
layer.close(that.index);
};
}
//确认取消
if(config.btn){
var btns = elem[claname]('layermbtn')[0].children, btnlen = btns.length;
for(var ii = 0; ii < btnlen; ii++){
btns[ii].onclick = 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.shade && config.shadeClose){
var shade = elem[claname]('laymshade')[0];
shade.onclick = function(){
layer.close(that.index, config.end);
};
shade.ontouchmove = function(){
layer.close(that.index, config.end);
};
}
config.end && (ready.end[that.index] = config.end);
};
var layer = {
v: '1.2',
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[i].getAttribute('index'));
}
}
};
"function" === typeof define ? define(function() {
return layer;
}) : win.layer = layer;
}(window);

2
mobile/layer.m.js Normal file
View File

@ -0,0 +1,2 @@
/*! layer mobile-v1.2 弹层组件移动版 2014-09-24 License LGPL http://sentsin.com/layui/layer/ By 贤心 */
;!function(a){"use strict";var b="";b=b?b:document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0];var c=document,d="querySelectorAll",e="getElementsByClassName",f=function(a){return c[d](a)};document.head.appendChild(function(){var a=c.createElement("link");return a.href=b+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}());var g={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0};a.ready={extend:function(a){var b=JSON.parse(JSON.stringify(g));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};var h=0,i=["layermbox"],j=function(a){var b=this;b.config=ready.extend(a),b.view()};j.prototype.view=function(){var a=this,b=a.config,d=c.createElement("div");a.id=d.id=i[0]+h,d.setAttribute("class",i[0]+" "+i[0]+(b.type||0)),d.setAttribute("index",h);var g=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>':""}(),j=function(){var a,c=(b.btn||[]).length;return 0!==c&&b.btn?(a='<span type="1">'+b.btn[0]+"</span>",2===c&&(a='<span type="0">'+b.btn[1]+"</span>"+a),'<div class="layermbtn">'+a+"</div>"):""}();if(b.fixed||(b.top=b.hasOwnProperty("top")?b.top:100,b.style=b.style||"",b.style+=" top:"+(c.body.scrollTop+b.top)+"px"),2===b.type&&(b.content='<i></i><i class="laymloadtwo"></i><i></i><div>'+(b.content||"")+"</div>"),d.innerHTML=(b.shade?'<div class="laymshade"></div>':"")+'<div class="layermmain" '+(b.fixed?"":'style="position:static;"')+'><section><div class="layermchild '+(b.type||b.shade?"":"layermborder ")+(b.anim?"layermanim":"")+'" '+(b.style?'style="'+b.style+'"':"")+">"+g+'<div class="layermcont">'+b.content+"</div>"+j+"</div></section></div>",!b.type||2===b.type){var l=c[e](i[0]+b.type),m=l.length;m>=1&&k.close(l[0].getAttribute("index"))}document.body.appendChild(d);var n=a.elem=f("#"+a.id)[0];setTimeout(function(){try{n.className=n.className+" layermshow"}catch(a){return}b.success&&b.success(n)},1),a.index=h++,a.action(b,n)},j.prototype.action=function(a,b){var c=this;if(a.time&&(ready.timer[c.index]=setTimeout(function(){k.close(c.index)},1e3*a.time)),a.title&&(b[e]("layermend")[0].onclick=function(){a.cancel&&a.cancel(),k.close(c.index)}),a.btn)for(var d=b[e]("layermbtn")[0].children,f=d.length,g=0;f>g;g++)d[g].onclick=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),k.close(c.index)):a.yes?a.yes(c.index):k.close(c.index)};if(a.shade&&a.shadeClose){var h=b[e]("laymshade")[0];h.onclick=function(){k.close(c.index,a.end)},h.ontouchmove=function(){k.close(c.index,a.end)}}a.end&&(ready.end[c.index]=a.end)};var k={v:"1.2",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var b=f("#"+i[0]+a)[0];b&&(b.innerHTML="",c.body.removeChild(b),clearTimeout(ready.timer[a]),delete ready.timer[a],"function"==typeof ready.end[a]&&ready.end[a](),delete ready.end[a])},closeAll:function(){for(var a=c[e](i[0]),b=0,d=a.length;d>b;b++)k.close(a[b].getAttribute("index"))}};"function"==typeof define?define(function(){return k}):a.layer=k}(window);

44
mobile/need/layer.css Normal file
View File

@ -0,0 +1,44 @@
/* layer弹层移动版样式 */
.layermbox{position:absolute; left:0; top:0; width:100%; z-index:19891014;}
/*.layermbox *{margin:0; bottom:0;}*/
.layermanim{transition: all .18s; -webkit-transition: all .18s;}
.laymshade,
.layermmain{position:fixed; left:0; top:0; width:100%; height:100%;}
.laymshade{background-color:rgba(0,0,0, .5); pointer-events:auto;}
.layermmain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
.layermmain section{display:table-cell; vertical-align:middle; text-align:center;}
.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:6px; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0); -webkit-transform: scale(0); pointer-events:auto;}
.layermborder{border:1px solid #999;}
.layermshow .layermchild{opacity: 1; transform:scale(1); -webkit-transform: scale(1);}
.layermbox0 .layermchild{max-width:260px; min-width:150px;}
.layermbox1 .layermchild{border:none; border-radius:0;}
.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background-color:rgba(0,0,0,.6); color:#fff;}
.layermchild h3{padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:5px 5px 0 0; border-bottom:1px solid #EBEBEB;}
.layermchild h3,
.layermbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.layermcont{padding:20px 15px; line-height:22px; border-radius:5px;}
.layermbox1 .layermcont{padding:0;}
.layermbox2 .layermcont{text-align:center; padding:30px 30px 0; line-height: 0;}
.layermbox2 .layermcont i{width:1.5rem; height:1.5rem; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
.layermbox2 .layermcont i{-webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes bouncedelay{
0%,80%,100%{-webkit-transform:scale(0)}
40%{-webkit-transform:scale(1)}
}
@keyframes bouncedelay{
0%,80%,100%{transform:scale(0);-webkit-transform:scale(0)}
40%{transform:scale(1);-webkit-transform:scale(1)}
}
.layermbox2 .layermcont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
.layermbox2 .layermcont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
.layermbtn{position:relative; height:40px; line-height:40px; font-size:0; text-align:center; border-top:1px solid #EBEBEB;}
.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer;}
.layermbtn span:first-child{border:none; background-color:#fff}
.layermbtn:before{content:'\20'; position:absolute; width:1px; height:100%; left:50%; top:0; background-color:#EBEBEB;}
.layermend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
.layermend::before, .layermend::after{position:absolute; left:5px; top:13px; content:''; width:20px; height:2px; background-color:rgba(0,0,0,.3); transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
.layermend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}