diff --git a/m/README.md b/m/README.md new file mode 100644 index 0000000..9d6747e --- /dev/null +++ b/m/README.md @@ -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) \ No newline at end of file diff --git a/m/layer.m.dev.js b/m/layer.m.dev.js new file mode 100644 index 0000000..a599c74 --- /dev/null +++ b/m/layer.m.dev.js @@ -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 + ? '

'+ (titype ? config.title[0] : config.title) +'

' + : ''; + }()); + + var button = (function(){ + var btns = (config.btn || []).length, btndom; + if(btns === 0 || !config.btn){ + return ''; + } + btndom = ''+ config.btn[0] +'' + if(btns === 2){ + btndom = ''+ config.btn[1] +'' + btndom; + } + return '
'+ btndom + '
'; + }()); + + 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 ? '
' : '') + +'
' + +'
' + +'
' + + title + +'
'+ (config.content||' ') +'
' + + button + +'
' + +'
' + +'
'; + + 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); \ No newline at end of file diff --git a/m/layer.m.js b/m/layer.m.js new file mode 100644 index 0000000..8080f81 --- /dev/null +++ b/m/layer.m.js @@ -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?'

'+(a?b.title[0]:b.title)+'

':""}(),k=function(){var c,a=(b.btn||[]).length;return 0!==a&&b.btn?(c=''+b.btn[0]+"",2===a&&(c=''+b.btn[1]+""+c),'
'+c+"
"):""}(),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?'
':"")+'
"+"
"+'
"+h+'
'+(b.content||" ")+"
"+k+"
"+"
"+"
",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); \ No newline at end of file diff --git a/m/need/layer.css b/m/need/layer.css new file mode 100644 index 0000000..d9212e1 --- /dev/null +++ b/m/need/layer.css @@ -0,0 +1,29 @@ +/* layer弹层移动版样式 */ + +.layermbox{position:absolute; left:0; top:0; width:100%; z-index:19891014;} +.layermbox *{margin:0; bottom:0;} +.layermchild{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; border:1px solid #999; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0); -webkit-transform: scale(0); pointer-events:auto;} +.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;} +.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:20px; border-radius:5px;} +.layermbox1 .layermcont{padding:0;} +.layermbox2 .layermcont{padding-left:50px; background: url(data:image/gif;base64,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) no-repeat 20px 18px;} +.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:7px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; color:rgba(0,0,0,.2); cursor: pointer; -webkit-appearance: none; font-size:30px;} +.layermend:focus, .layermend:hover{color:rgba(0,0,0,.5); outline: 0;); + +