diff --git a/CHANGELOG.md b/CHANGELOG.md index d9f65cb..5a91600 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,18 +1,48 @@ -# 【2.4】2016.07.03 + +# 【v3.0】 2016.11.07 +* 新增拖动弹层右下角可调节弹层尺寸的功能，由参数resize控制，默认不开启 +* offset参数新增 t、r、b、l、lt、lb、rt、rb、的赋值，可快捷实现上、右、下、左、左上角、左下角、右上角、右下角的边缘定位 +* 新增btnAlign参数，支持三个参数：l/c/r，分别用于控制按钮居左、居中、居右的快捷设置（默认r，即居右） +* 点击最小化时，自动定位到页面左下角，在出现多个最小化时，会依次排列，这是一次较为重大的完善。 +* 新增关闭层的过度动画 + +* 重写拖拽核心代码，性能大幅度提升 +* layer.config核心调整 +* layer.config中的extend参数只提供加载一个css皮肤文件（详见文档） +* 处理在head标签中执行layer弹层无效的情况 +* 瘦身layer.ready方法 +* 修改iframe层的loading动画 +* 捕获页类型的弹层在关闭时，会根据所捕获元素的初始display值，进行不同处理，即不再强制隐藏。 + +* 剔除moveType参数，只提供默认的一种拖拽风格 +* 剔除语义欠佳的fix参数，改为fixed取代 +* 剔除语义欠佳的shift参数，改为anim取代，不过仍然对shift参数兼容 + +* 完善tips层细节 +* 将prompt层改成页面层结构，即当你弹出prompt层时，再弹出msg，不会将prompt销毁。 +* prompt层的textarea模式支持area参数来设定宽高 +* layer.css大面积改善 + +* 修复iframe层在用于iPhone设备时，无法触发滚动的Bug + +--- + + +# 【v2.4】2016.07.03 * 兼容jQuery3.0 * 优化tips，可支持配置参数fix（之前是强制fix: false），用于决定是固定的tips还是非固定的。 * min回调可通过return false来设定不执行默认最小化。 * 修复在移动端使用iframe，IOS下无法滑动的bug。 * 细节优化及样式微调 -# 【2.3】2016.05.18 +# 【v2.3】2016.05.18 * 通过对使用频率的调查，将layer.ext.js（拓展模块）合并到了layer.js，即不用再通过layer.config来加载调用。 * cancel回调不再对第二个按钮有效，只作为右上角关闭按钮触发。并且除yes回调外，所以按钮的回调都可以通过return false来设定不默认关闭。 * 修复相册层，点击任意图片查看，弹出的并非当前图片的bug。 * 修复相册层在移动端显示不佳的bug。 * 修复msg、alert等对话框类型的弹层，在手机使用时未水平居中的bug。 -# 【2.2】2015.03.18 +# 【v2.2】2016.03.18 * 增加参数id，用于控制弹层唯一标识。如不想重复弹出，可设置该值。 * layer.tips允许出现遮罩，即不对shade参数做限制。 * 对layer.photos方法直接弹出页面图片进行了事件委托，修复了之前由于动态插入的img而无法执行弹出的bug，并且修复了当图片信息改变时，仍然弹出了之前的图片的bug @@ -21,7 +51,7 @@ * 样式微调 -# 【2.1】2015.11.04 +# 【v2.1】2015.11.04 * 修复在使用seajs或者requirejs后，layer.ext.js报layer未定义的错误。 * 修复弹出层后，回车键无效的bug。 * 修复iframe层的success回调在ie8以下浏览器无效的bug @@ -31,29 +61,31 @@ * 优化图标锯齿消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){} - -# 【2.0】2015.09.01 +# 【v2.0】2015.09.01 * 全新的默认皮肤 * 修复按住Enter键时，出现不断弹层的bug。 * 修复模块加载时，layer仍然暴露给了全局的bug。 * 修复拖拽完毕回调moveEnd，在层关闭后拖拽鼠标仍然触发该回调的bug。 * 确认和取消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){} -## == 拓展模块 == +### 拓展模块 * 修复通过script标签引入layer.ext.js时，出现Cannot read property 'skin' of undefined的报错问题。（虽然我们更推荐用layer.config()方式加载layer.ext.js）。 * 如果相册只有一张图片，则不触发上/下一张。 -# 【1.9.3】2015.05.23 +--- + + +# 【v1.9.3】2015.05.23 * 修复全局设置皮肤时，部分类型层未起作用的bug。 * 增加skin值：layui-layer-rim，用于给层加边框（类似1.85的风格） * 样式微调 -## == 拓展模块 == +### 拓展模块 * 修复相册层设定基础参数时，只有首次有效的bug。 -# 【1.9.2】2015.05.08 +# 【v1.9.2】2015.05.08 * 增加关闭动画样式：layui-layer-close * 优化默认弹出动画 * 优化默认图标，默认的icon支持缩减到0-6（拓展皮肤可自己任意设定支持的数目） @@ -61,7 +93,7 @@ * 机智地修复了一个隐藏得非常深的但是不是太重要的bug。 * 剔除了一些图片。 -# 【1.9.1】2015.04.29 +# 【v1.9.1】2015.04.29 * btn设定多个按钮时，新增对应的回调（支持只有yes和cancel回调）,如btn: ['按钮一','按钮二','按钮三']，按钮一和按钮二还是之前的yes和cancel，按钮三，则回调为 btn3: function(){}，以此类推。 * 对cancel回调进行了微完善，如果不想关闭，return false即可，如cancel: function(){return false}，取消则不会关闭。 * 修复当设置了fix:false时,offset的设置无效的bug @@ -72,7 +104,7 @@ * 完善当采用script标签合并路径的方式引入layer，加载了错误的css路径的问题。这种情况需在script标签上加一个自定义属性merge="true",然后通过layer.config({path: 'layer所在目录'})来完成初始化的配置 * 样式微调 -# 【1.9.0】2015.04.19 +# 【v1.9.0】2015.04.19 * 新增laye.open(options)，抛弃了之前的$.layer(options)调用方法，目的是与layer mobile保持统一。 * 新增layer.config(options)方法，用于进行全局化配置。除了用于展现弹层的基础参数外，还支持path，用于模块化加载layer时设定目录以便加载所需配件，如layer.config({path: '所在路径', extend: ''}); @@ -107,7 +139,7 @@ * 默认不显示dialog图标，需要显示配置dialog指定的type即可 * 很多不可见只可感受的细节改动 -### << 拓展模块 >> +### 拓展模块 * layer.prompt/layer.tab/layer.photos重写，代码更强健，功能更强大，详见Api。 @@ -115,11 +147,16 @@ ——贤心 2015/4/15 -# 【1.8.5】 + +--- + + + +# 【v1.8.5】 * 新增对title样式的自定义控制 * 修复layer.prompt多行文本，设置默认值无效的bug -# 【1.8.4】 +# 【v1.8.4】 * 新增浏览器窗口尺寸改变时的自适应定位 * 新增属性shift，用于配置动画弹出（需要注意的是，之前的layer.shift()方法将在layer1.9遗弃，用shift属性取代） * 新增方法layer.title(name, index); 用于动态改变层的标题。 @@ -129,7 +166,7 @@ * 放弃layer.ready方法，用jQuery的ready取代。 * 进一步优化内部代码 -## == 拓展模块 == +### 拓展模块 * layer.prompt支持给表单传入默认值，如layer.prompt({val:'默认'}); 新增yes回调函数第二个参数为索引、第三个参数为表单元素。 * 相册层新增tab回调函数，用于切换图片时进行相关操作 * 相册层内部代码优化。 diff --git a/src/layer.js b/src/layer.js index e6cb1ef..ef9665a 100644 --- a/src/layer.js +++ b/src/layer.js @@ -1,6 +1,6 @@ -/*! +/** - @Name：layer v2.4 弹层组件 + @Name：layer v3.0 Web弹层组件 @Author：贤心 @Site：http://layer.layui.com @License：LGPL @@ -10,19 +10,15 @@ ;!function(window, undefined){ "use strict"; -var $, win, ready = { +var isLayui = window.layui && layui.define, $, win, ready = { getPath: function(){ var js = document.scripts, script = js[js.length - 1], jsPath = script.src; if(script.getAttribute('merge')) return; return jsPath.substring(0, jsPath.lastIndexOf("/") + 1); }(), - - //屏蔽Enter触发弹层 - enter: function(e){ - if(e.keyCode === 13) e.preventDefault(); - }, - config: {}, end: {}, - btn: ['确定','取消'], + + config: {}, end: {}, minIndex: 0, minLeft: [], + btn: ['确定', '取消'], //五种原始层模式 type: ['dialog', 'page', 'iframe', 'loading', 'tips'] @@ -30,58 +26,59 @@ var $, win, ready = { //默认内置方法。 var layer = { - v: '2.4', + v: '3.0', ie6: !!window.ActiveXObject&&!window.XMLHttpRequest, index: (window.layer && window.layer.v) ? 100000 : 0, path: ready.getPath, config: function(options, fn){ - var item = 0; options = options || {}; - layer.cache = ready.config = $.extend(ready.config, options); + layer.cache = ready.config = $.extend({}, ready.config, options); layer.path = ready.config.path || layer.path; typeof options.extend === 'string' && (options.extend = [options.extend]); - layer.use('skin/default/layer.css', (options.extend && options.extend.length > 0) ? (function loop(){ - var ext = options.extend; - layer.use(ext[ext[item] ? item : item-1], item < ext.length ? function(){ - ++item; - return loop; - }() : fn); - }()) : fn); + + if(!options.extend) return this; + + isLayui + ? layui.addcss('modules/layer/' + options.extend) + : layer.link('skin/' + options.extend); + return this; }, - //载入配件 - use: function(module, fn, readyMethod){ - var i = 0, head = $('head')[0]; - var module = module.replace(/\s/g, ''); - var iscss = /\.css$/.test(module); - var node = document.createElement(iscss ? 'link' : 'script'); - var id = 'layui_layer_' + module.replace(/\.|\//g, ''); + //载入CSS配件 + link: function(href, fn, cssname){ + + //未设置路径，则不主动加载css if(!layer.path) return; - if(iscss){ - node.rel = 'stylesheet'; - } - node[iscss ? 'href' : 'src'] = /^http:\/\//.test(module) ? module : layer.path + module; - node.id = id; + + var head = $('head')[0], link = document.createElement('link'); + if(typeof fn === 'string') cssname = fn; + var app = (cssname || href).replace(/\.|\//g, ''); + var id = 'layuicss-'+app, timeout = 0; + + link.rel = 'stylesheet'; + link.href = layer.path + href; + link.id = id; + if(!$('#'+ id)[0]){ - head.appendChild(node); + head.appendChild(link); } - //轮询加载就绪 - ;(function poll() { - ;(iscss ? parseInt($('#'+id).css('width')) === 1989 : layer[readyMethod||id]) ? function(){ - fn && fn(); - try { iscss || head.removeChild(node); } catch(e){}; - }() : setTimeout(poll, 100); + + if(typeof fn !== 'function') return; + + //轮询css是否加载完毕 + (function poll() { + if(++timeout > 8 * 1000 / 100){ + return window.console && console.error('layer.css: Invalid'); + }; + parseInt($('#'+id).css('width')) === 1989 ? fn() : setTimeout(poll, 100); }()); - return this; }, - ready: function(path, fn){ - var type = typeof path === 'function'; - if(type) fn = path; - layer.config($.extend(ready.config, function(){ - return type ? {} : {path: path}; - }()), fn); + ready: function(callback){ + var cssname = 'skinlayercss', ver = '1518'; + isLayui ? layui.addcss('modules/layer/default/layer.css?v='+layer.v+ver, callback, cssname) + : layer.link('skin/default/layer.css?v='+layer.v+ver, callback, cssname); return this; }, @@ -112,7 +109,7 @@ var layer = { msg: function(content, options, end){ //最常用提示层 var type = typeof options === 'function', rskin = ready.config.skin; var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg'; - var shift = doms.anim.length - 1; + var anim = doms.anim.length - 1; if(type) end = options; return layer.open($.extend({ content: content, @@ -122,10 +119,11 @@ var layer = { title: false, closeBtn: false, btn: false, + resize: false, end: end }, (type && !ready.config.skin) ? { skin: skin + ' layui-layer-hui', - shift: shift + anim: anim } : function(){ options = options || {}; if(options.icon === -1 || options.icon === undefined && !ready.config.skin){ @@ -139,6 +137,7 @@ var layer = { return layer.open($.extend({ type: 3, icon: icon || 0, + resize: false, shade: 0.01 }, options)); }, @@ -150,7 +149,8 @@ var layer = { closeBtn: false, time: 3000, shade: false, - fix: false, + resize: false, + fixed: false, maxWidth: 210 }, options)); } @@ -160,7 +160,9 @@ var Class = function(setings){ var that = this; that.index = ++layer.index; that.config = $.extend({}, that.config, ready.config, setings); - that.creat(); + document.body ? that.creat() : setTimeout(function(){ + that.creat(); + }, 50); }; Class.pt = Class.prototype; @@ -173,7 +175,7 @@ doms.anim = ['layer-anim', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'l Class.pt.config = { type: 0, shade: 0.3, - fix: true, + fixed: true, move: doms[1], title: '信息', offset: 'auto', @@ -182,8 +184,10 @@ Class.pt.config = { time: 0, //0表示不自动关闭 zIndex: 19891014, maxWidth: 360, - shift: 0, + anim: 0, icon: -1, + moveType: 1, + resize: true, scrollbar: true, //是否允许浏览器滚动条 tips: 2 }; @@ -203,12 +207,12 @@ Class.pt.vessel = function(conType, callback){ config.shade ? ('
') : '', //主体 - '
' + '
' + (conType && config.type != 2 ? '' : titleHTML) - +'
' + + '
' + (config.type == 0 && config.icon !== -1 ? '' : '') + (config.type == 1 && conType ? '' : (config.content||'')) - +'
' + + '
' + ''+ function(){ var closebtn = ismax ? '' : ''; config.closeBtn && (closebtn += ''); @@ -220,24 +224,34 @@ Class.pt.vessel = function(conType, callback){ for(var i = 0, len = config.btn.length; i < len; i++){ button += ''+ config.btn[i] +'' } - return '
'+ button +'
' + return '
'+ button +'
' }() : '') - +'
' - ], titleHTML); + + (config.resize ? '' : '') + + '
' + ], titleHTML, $('
')); return that; }; //创建骨架 Class.pt.creat = function(){ - var that = this, config = that.config, times = that.index, nodeIndex; - var content = config.content, conType = typeof content === 'object'; + var that = this + ,config = that.config + ,times = that.index, nodeIndex + ,content = config.content + ,conType = typeof content === 'object' + ,body = $('body'); if($('#'+config.id)[0]) return; - + if(typeof config.area === 'string'){ config.area = config.area === 'auto' ? ['', ''] : [config.area, '']; } + //anim兼容旧版shift + if(config.shift){ + config.anim = config.shift; + } + switch(config.type){ case 0: config.btn = ('btn' in config) ? config.btn : ready.btn[0]; @@ -248,8 +262,8 @@ Class.pt.creat = function(){ config.content = ''; break; case 3: - config.title = false; - config.closeBtn = false; + delete config.title; + delete config.closeBtn; config.icon === -1 && (config.icon === 0); layer.closeAll('loading'); break; @@ -257,38 +271,35 @@ Class.pt.creat = function(){ conType || (config.content = [config.content, 'body']); config.follow = config.content[1]; config.content = config.content[0] + ''; - config.title = false; + delete config.title; config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true]; config.tipsMore || layer.closeAll('tips'); break; } //建立容器 - that.vessel(conType, function(html, titleHTML){ - $('body').append(html[0]); + that.vessel(conType, function(html, titleHTML, moveElem){ + body.append(html[0]); conType ? function(){ (config.type == 2 || config.type == 4) ? function(){ $('body').append(html[1]); }() : function(){ if(!content.parents('.'+doms[0])[0]){ - content.show().addClass('layui-layer-wrap').wrap(html[1]); + content.data('display', content.css('display')).show().addClass('layui-layer-wrap').wrap(html[1]); $('#'+ doms[0] + times).find('.'+doms[5]).before(titleHTML); } }(); - }() : $('body').append(html[1]); + }() : body.append(html[1]); + $('.layui-layer-move')[0] || body.append(ready.moveElem = moveElem); that.layero = $('#'+ doms[0] + times); config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times); }).auto(times); config.type == 2 && layer.ie6 && that.layero.find('iframe').attr('src', content[0]); - $(document).off('keydown', ready.enter).on('keydown', ready.enter); - that.layero.on('keydown', function(e){ - $(document).off('keydown', ready.enter); - }); //坐标自适应浏览器窗口尺寸 config.type == 4 ? that.tips() : that.offset(); - if(config.fix){ + if(config.fixed){ win.on('resize', function(){ that.offset(); (/^\d+%$/.test(config.area[0]) || /^\d+%$/.test(config.area[1])) && that.auto(times); @@ -302,10 +313,9 @@ Class.pt.creat = function(){ that.move().callback(); //为兼容jQuery3.0的css动画影响元素尺寸计算 - if(doms.anim[config.shift]){ - that.layero.addClass(doms.anim[config.shift]); + if(doms.anim[config.anim]){ + that.layero.addClass(doms.anim[config.anim]); }; - }; //自适应 @@ -331,7 +341,7 @@ Class.pt.auto = function(index){ break; default: if(config.area[1] === ''){ - if(config.fix && area[1] >= win.height()){ + if(config.fixed && area[1] >= win.height()){ area[1] = win.height(); setHeight('.'+doms[5]); } @@ -350,17 +360,39 @@ Class.pt.offset = function(){ var type = typeof config.offset === 'object'; that.offsetTop = (win.height() - area[1])/2; that.offsetLeft = (win.width() - area[0])/2; + if(type){ that.offsetTop = config.offset[0]; that.offsetLeft = config.offset[1]||that.offsetLeft; } else if(config.offset !== 'auto'){ - that.offsetTop = config.offset; - if(config.offset === 'rb'){ //右下角 + + if(config.offset === 't'){ //上 + that.offsetTop = 0; + } else if(config.offset === 'r'){ //右 + that.offsetLeft = win.width() - area[0]; + } else if(config.offset === 'b'){ //下 + that.offsetTop = win.height() - area[1]; + } else if(config.offset === 'l'){ //左 + that.offsetLeft = 0; + } else if(config.offset === 'lt'){ //左上角 + that.offsetTop = 0; + that.offsetLeft = 0; + } else if(config.offset === 'lb'){ //左下角 + that.offsetTop = win.height() - area[1]; + that.offsetLeft = 0; + } else if(config.offset === 'rt'){ //右上角 + that.offsetTop = 0; + that.offsetLeft = win.width() - area[0]; + } else if(config.offset === 'rb'){ //右下角 that.offsetTop = win.height() - area[1]; that.offsetLeft = win.width() - area[0]; + } else { + that.offsetTop = config.offset; } + } - if(!config.fix){ + + if(!config.fixed){ that.offsetTop = /%$/.test(that.offsetTop) ? win.height()*parseFloat(that.offsetTop)/100 : parseFloat(that.offsetTop); @@ -370,6 +402,12 @@ Class.pt.offset = function(){ that.offsetTop += win.scrollTop(); that.offsetLeft += win.scrollLeft(); } + + if(layero.attr('minLeft')){ + that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0); + that.offsetLeft = layero.css('left'); + } + layero.css({top: that.offsetTop, left: that.offsetLeft}); }; @@ -433,81 +471,99 @@ Class.pt.tips = function(){ 'padding-right': (config.closeBtn ? '30px' : '') }); layero.css({ - left: goal.tipLeft - (config.fix ? win.scrollLeft() : 0), - top: goal.tipTop - (config.fix ? win.scrollTop() : 0) + left: goal.tipLeft - (config.fixed ? win.scrollLeft() : 0), + top: goal.tipTop - (config.fixed ? win.scrollTop() : 0) }); } //拖拽层 Class.pt.move = function(){ - var that = this, config = that.config, conf = { - setY: 0, - moveLayer: function(){ - var layero = conf.layero, mgleft = parseInt(layero.css('margin-left')); - var lefts = parseInt(conf.move.css('left')); - mgleft === 0 || (lefts = lefts - mgleft); - if(layero.css('position') !== 'fixed'){ - lefts = lefts - layero.parent().offset().left; - conf.setY = 0; - } - layero.css({left: lefts, top: parseInt(conf.move.css('top')) - conf.setY}); - } - }; + var that = this + ,config = that.config + ,_DOC = $(document) + ,layero = that.layero + ,moveElem = layero.find(config.move) + ,resizeElem = layero.find('.layui-layer-resize') + ,dict = {}; - var movedom = that.layero.find(config.move); - config.move && movedom.attr('move', 'ok'); - movedom.css({cursor: config.move ? 'move' : 'auto'}); - - $(config.move).on('mousedown', function(M){ - M.preventDefault(); - if($(this).attr('move') === 'ok'){ - conf.ismove = true; - conf.layero = $(this).parents('.'+ doms[0]); - var xx = conf.layero.offset().left, yy = conf.layero.offset().top, ww = conf.layero.outerWidth() - 6, hh = conf.layero.outerHeight() - 6; - if(!$('#layui-layer-moves')[0]){ - $('body').append('
'); - } - conf.move = $('#layui-layer-moves'); - config.moveType && conf.move.css({visibility: 'hidden'}); - - conf.moveX = M.pageX - conf.move.position().left; - conf.moveY = M.pageY - conf.move.position().top; - conf.layero.css('position') !== 'fixed' || (conf.setY = win.scrollTop()); + if(config.move){ + moveElem.css('cursor', 'move'); + } + + moveElem.on('mousedown', function(e){ + e.preventDefault(); + if(config.move){ + dict.moveStart = true; + dict.offset = [ + e.clientX - parseFloat(layero.css('left')) + ,e.clientY - parseFloat(layero.css('top')) + ]; + ready.moveElem.css('cursor', 'move').show(); } }); - $(document).mousemove(function(M){ - if(conf.ismove){ - var offsetX = M.pageX - conf.moveX, offsetY = M.pageY - conf.moveY; - M.preventDefault(); + resizeElem.on('mousedown', function(e){ + e.preventDefault(); + dict.resizeStart = true; + dict.offset = [e.clientX, e.clientY]; + dict.area = [ + layero.outerWidth() + ,layero.outerHeight() + ]; + ready.moveElem.css('cursor', 'se-resize').show(); + }); + + _DOC.on('mousemove', function(e){ + + //拖拽移动 + if(dict.moveStart){ + var X = e.clientX - dict.offset[0] + ,Y = e.clientY - dict.offset[1] + + dict.stX = config.fixed ? 0 : win.scrollLeft(); + dict.stY = config.fixed ? 0 : win.scrollTop(); //控制元素不被拖出窗口外 if(!config.moveOut){ - conf.setY = win.scrollTop(); - var setRig = win.width() - conf.move.outerWidth(), setTop = conf.setY; - offsetX < 0 && (offsetX = 0); - offsetX > setRig && (offsetX = setRig); - offsetY < setTop && (offsetY = setTop); - offsetY > win.height() - conf.move.outerHeight() + conf.setY && (offsetY = win.height() - conf.move.outerHeight() + conf.setY); + var setRig = win.width() - layero.outerWidth() + dict.stX + ,setBot = win.height() - layero.outerHeight() + dict.stY; + X < dict.stX && (X = dict.stX); + X > setRig && (X = setRig); + Y < dict.stY && (Y = dict.stY); + Y > setBot && (Y = setBot); } - conf.move.css({left: offsetX, top: offsetY}); - config.moveType && conf.moveLayer(); + layero.css({ + left: X + ,top: Y + }); + return false; + } + + //Resize + if(config.resize && dict.resizeStart){ + var X = e.clientX - dict.offset[0] + ,Y = e.clientY - dict.offset[1] - offsetX = offsetY = setRig = setTop = null; - } - }).mouseup(function(){ - try{ - if(conf.ismove){ - conf.moveLayer(); - conf.move.remove(); - config.moveEnd && config.moveEnd(); - } - conf.ismove = false; - }catch(e){ - conf.ismove = false; + layer.style(that.index, { + width: dict.area[0] + X + ,height: dict.area[1] + Y + }) + dict.isResize = true; + return false; + } + }).on('mouseup', function(e){ + if(dict.moveStart){ + delete dict.moveStart; + ready.moveElem.hide(); + config.moveEnd && config.moveEnd(); + } + if(dict.resizeStart){ + delete dict.resizeStart; + ready.moveElem.hide(); } }); + return that; }; @@ -596,7 +652,7 @@ Class.pt.IE6 = function(layero){ //ie6的固定与相对定位 function ie6Fix(){ - layero.css({top : _ieTop + (that.config.fix ? win.scrollTop() : 0)}); + layero.css({top : _ieTop + (that.config.fixed ? win.scrollTop() : 0)}); }; ie6Fix(); win.scroll(ie6Fix); @@ -683,16 +739,35 @@ layer.iframeSrc = function(index, url){ //设定层的样式 layer.style = function(index, options){ - var layero = $('#'+ doms[0] + index), type = layero.attr('type'); - var titHeight = layero.find(doms[1]).outerHeight() || 0; - var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0; - if(type === ready.type[1] || type === ready.type[2]){ - layero.css(options); - if(type === ready.type[2]){ - layero.find('iframe').css({ - height: parseFloat(options.height) - titHeight - btnHeight - }); - } + var layero = $('#'+ doms[0] + index) + ,contElem = layero.find('.layui-layer-content') + ,type = layero.attr('type') + ,titHeight = layero.find(doms[1]).outerHeight() || 0 + ,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0; + + if(type === ready.type[3] || type === ready.type[4]){ + return; + } + + if(parseFloat(options.width) <= 260){ + options.width = 260; + }; + + if(parseFloat(options.height) - titHeight - btnHeight <= 64){ + options.height = 64 + titHeight + btnHeight; + }; + + layero.css(options); + if(type === ready.type[2]){ + layero.find('iframe').css({ + height: parseFloat(options.height) - titHeight - btnHeight + }); + } else { + contElem.css({ + height: parseFloat(options.height) - titHeight - btnHeight + - parseFloat(contElem.css('padding-top')) + - parseFloat(contElem.css('padding-bottom')) + }) } }; @@ -700,11 +775,33 @@ layer.style = function(index, options){ layer.min = function(index, options){ var layero = $('#'+ doms[0] + index); var titHeight = layero.find(doms[1]).outerHeight() || 0; + var left = layero.attr('minLeft') || (181*ready.minIndex)+'px'; ready.record(layero); - layer.style(index, {width: 180, height: titHeight, overflow: 'hidden'}); + + if(ready.minLeft[0]){ + left = ready.minLeft[0]; + ready.minLeft.shift(); + } + + layero.attr('position', layero.css('position')); + + layer.style(index, { + width: 180 + ,height: titHeight + ,left: left + ,top: win.height() - titHeight + ,position: 'fixed' + ,overflow: 'hidden' + }); + layero.find('.layui-layer-min').hide(); layero.attr('type') === 'page' && layero.find(doms[4]).hide(); ready.rescollbar(index); + + if(!layero.attr('minLeft')){ + ready.minIndex++; + } + layero.attr('minLeft', left); }; //还原 @@ -716,6 +813,7 @@ layer.restore = function(index){ height: parseFloat(area[1]), top: parseFloat(area[2]), left: parseFloat(area[3]), + position: layero.attr('position'), overflow: 'visible' }); layero.find('.layui-layer-max').removeClass('layui-layer-maxmin'); @@ -735,10 +833,10 @@ layer.full = function(index){ timer = setTimeout(function(){ var isfix = layero.css('position') === 'fixed'; layer.style(index, { - top: isfix ? 0 : win.scrollTop(), - left: isfix ? 0 : win.scrollLeft(), - width: win.width(), - height: win.height() + top: isfix ? 0 : win.scrollTop(), + left: isfix ? 0 : win.scrollLeft(), + width: win.width(), + height: win.height() }); layero.find('.layui-layer-min').hide(); }, 100); @@ -752,32 +850,43 @@ layer.title = function(name, index){ //关闭layer总方法 layer.close = function(index){ - var layero = $('#'+ doms[0] + index), type = layero.attr('type'); + var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close'; if(!layero[0]) return; - if(type === ready.type[1] && layero.attr('conType') === 'object'){ - layero.children(':not(.'+ doms[5] +')').remove(); - for(var i = 0; i < 2; i++){ - layero.find('.layui-layer-wrap').unwrap().hide(); + var remove = function(){ + if(type === ready.type[1] && layero.attr('conType') === 'object'){ + layero.children(':not(.'+ doms[5] +')').remove(); + var wrap = layero.find('.layui-layer-wrap'); + for(var i = 0; i < 2; i++){ + wrap.unwrap(); + } + wrap.css('display', wrap.data('display')); + } else { + //低版本IE 回收 iframe + if(type === ready.type[2]){ + try { + var iframe = $('#'+doms[4]+index)[0]; + iframe.contentWindow.document.write(''); + iframe.contentWindow.close(); + layero.find('.'+doms[5])[0].removeChild(iframe); + } catch(e){} + } + layero[0].innerHTML = ''; + layero.remove(); } - } else { - //低版本IE 回收 iframe - if(type === ready.type[2]){ - try { - var iframe = $('#'+doms[4]+index)[0]; - iframe.contentWindow.document.write(''); - iframe.contentWindow.close(); - layero.find('.'+doms[5])[0].removeChild(iframe); - } catch(e){} - } - layero[0].innerHTML = ''; - layero.remove(); - } + }; + layero.addClass(closeAnim); $('#layui-layer-moves, #layui-layer-shade' + index).remove(); - layer.ie6 && ready.reselect(); - ready.rescollbar(index); - $(document).off('keydown', ready.enter); - typeof ready.end[index] === 'function' && ready.end[index](); - delete ready.end[index]; + layer.ie6 && ready.reselect(); + ready.rescollbar(index); + typeof ready.end[index] === 'function' && ready.end[index](); + delete ready.end[index]; + if(layero.attr('minLeft')){ + ready.minIndex--; + ready.minLeft.push(layero.attr('minLeft')); + } + setTimeout(function(){ + remove(); + }, 200); }; //关闭所有层 @@ -802,19 +911,32 @@ var cache = layer.cache||{}, skin = function(type){ //仿系统prompt layer.prompt = function(options, yes){ + var style = ''; options = options || {}; + if(typeof options === 'function') yes = options; - var prompt, content = options.formType == 2 ? '' : function(){ + + if(options.area){ + var area = options.area; + style = 'style="width: '+ area[0] +'; height: '+ area[1] + ';"'; + delete options.area; + } + var prompt, content = options.formType == 2 ? '' : function(){ return ''; }(); + return layer.open($.extend({ - btn: ['确定','取消'], - content: content, - skin: 'layui-layer-prompt' + skin('prompt'), - success: function(layero){ + type: 1 + ,btn: ['确定','取消'] + ,content: content + ,skin: 'layui-layer-prompt' + skin('prompt') + ,maxWidth: win.width() + ,success: function(layero){ prompt = layero.find('.layui-layer-input'); prompt.focus(); - }, yes: function(index){ + } + ,resize: false + ,yes: function(index){ var value = prompt.val(); if(value === ''){ prompt.focus(); @@ -834,6 +956,7 @@ layer.tab = function(options){ return layer.open($.extend({ type: 1, skin: 'layui-layer-tab' + skin('tab'), + resize: false, title: function(){ var len = tab.length, ii = 1, str = ''; if(len > 0){ @@ -1024,7 +1147,7 @@ layer.photos = function(options, loop, key){ moveType: 1, scrollbar: false, moveOut: true, - shift: Math.random()*5|0, + anim: Math.random()*5|0, skin: 'layui-layer-photos' + skin('photos'), content: '
' +''+ (data[start].alt||'') +'' @@ -1056,8 +1179,8 @@ layer.photos = function(options, loop, key){ }; //主入口 -ready.run = function(){ - $ = jQuery; +ready.run = function(_$){ + $ = _$; win = $(window); doms.html = $('html'); layer.open = function(deliver){ @@ -1066,12 +1189,25 @@ ready.run = function(){ }; }; -'function' === typeof define ? define(function(){ - ready.run(); - return layer; -}) : function(){ - ready.run(); - layer.use('skin/default/layer.css'); -}(); +//加载方式 +window.layui && layui.define ? ( + layer.ready() + ,layui.define('jquery', function(exports){ //layui加载 + layer.path = layui.cache.dir; + ready.run(layui.jquery); + + //暴露模块 + window.layer = layer; + exports('layer', layer); + }) +) : ( + typeof define === 'function' ? define('jquery', function(){ //requirejs加载 + ready.run(window.jQuery); + return layer; + }) : function(){ //普通script标签加载 + ready.run(window.jQuery); + layer.ready(); + }() +); }(window); \ No newline at end of file diff --git a/src/skin/default/layer.css b/src/skin/default/layer.css index ac535b0..352a7df 100644 --- a/src/skin/default/layer.css +++ b/src/skin/default/layer.css @@ -5,8 +5,8 @@ **/ -*html{background-image:url(about:blank); background-attachment:fixed;} -html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:1989px;} +*html{background-image: url(about:blank); background-attachment: fixed;} +html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;} /* common */ .layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;} @@ -15,78 +15,28 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19 .layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; box-shadow: 1px 1px 50px rgba(0,0,0,.3);} .layui-layer-close{position:absolute;} .layui-layer-content{position:relative;} -.layui-layer-border{border:1px solid #B2B2B2; border:1px solid rgba(0,0,0,.3); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} -.layui-layer-moves{position:absolute; border:3px solid #666; border:3px solid rgba(0,0,0,.5); cursor:move; background-color:#fff; background-color:rgba(255,255,255,.3); filter:alpha(opacity=50);} -.layui-layer-load{background:url(loading-0.gif) #fff center center no-repeat;} +.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} +.layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;} .layui-layer-ico{ background:url(icon.png) no-repeat;} .layui-layer-dialog .layui-layer-ico, .layui-layer-setwin a, .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} +.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;} +.layui-layer-resize{position: absolute; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;} + /* 动画 */ .layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;} @-webkit-keyframes bounceIn { /* 默认 */ - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1) - } + 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} + 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} } @keyframes bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1) - } + 0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)} + 100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)} } .layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn} -@-webkit-keyframes bounceOut { - 100% { - opacity: 0; - -webkit-transform: scale(.7); - transform: scale(.7) - } - 30% { - -webkit-transform: scale(1.03); - transform: scale(1.03) - } - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } -} -@keyframes bounceOut { - 100% { - opacity: 0; - -webkit-transform: scale(.7); - -ms-transform: scale(.7); - transform: scale(.7) - } - 30% { - -webkit-transform: scale(1.03); - -ms-transform: scale(1.03); - transform: scale(1.03) - } - 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1) - } -} -.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} @-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown} @@ -100,6 +50,18 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19 @-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} +@-webkit-keyframes bounceOut { /* 关闭动画 */ + 100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)} + 30% {-webkit-transform: scale(1.05); transform: scale(1.05)} + 0% {-webkit-transform: scale(1); transform: scale(1);} +} +@keyframes bounceOut { + 100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);} + 30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);} + 0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);} +} +.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} + /* 标题栏 */ .layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;} .layui-layer-setwin{position:absolute; right:15px; *right:0; top:15px; font-size:0; line-height: initial;} @@ -116,11 +78,13 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19 .layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;} /* 按钮栏 */ -.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto;} +.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;} .layui-layer-btn a{height: 28px; line-height: 28px; margin: 0 6px; padding: 0 15px; border:1px #dedede solid; background-color:#f1f1f1; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;} -.layui-layer-btn a:hover{opacity:0.9; text-decoration: none;} -.layui-layer-btn a:active{opacity:0.7;} +.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;} +.layui-layer-btn a:active{opacity: 0.8;} .layui-layer-btn .layui-layer-btn0{border-color: #4898d5; background-color: #2e8ded; color:#fff;} +.layui-layer-btn-l{text-align: left;} +.layui-layer-btn-c{text-align: center;} /* 定制化 */ .layui-layer-dialog{min-width:260px;} @@ -134,27 +98,29 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19 .layui-layer-ico6{background-position:-180px 0;} .layui-layer-rim{border:6px solid #8D8D8D; border:6px solid rgba(0,0,0,.3); border-radius:5px; box-shadow: none;} .layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;} -.layui-layer-hui{min-width:100px; background-color:#000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;} +.layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;} .layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;} .layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} .layui-layer-page .layui-layer-content{position:relative; overflow:auto;} .layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;} .layui-layer-nobg{background:none;} -.layui-layer-iframe .layui-layer-content{-webkit-overflow-scrolling: touch; overflow-y: auto;} -.layui-layer-iframe iframe{display:block; width:100%;} +.layui-layer-iframe, +.layui-layer-iframe .layui-layer-content{-webkit-overflow-scrolling: touch;} +.layui-layer-iframe .layui-layer-content{overflow-y: auto;} +.layui-layer-iframe iframe{display: block; width: 100%;} .layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;} .layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;} .layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;} .layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;} -.layui-layer-tips{background:none; box-shadow:none; border:none;} -.layui-layer-tips .layui-layer-content{position:relative; line-height:22px; min-width: 12px; padding:5px 10px; font-size:12px; _float:left; border-radius:3px; box-shadow: 1px 1px 3px rgba(0,0,0,.3); background-color:#FF9900; color:#fff;} +.layui-layer-tips{background: none; box-shadow:none; border:none;} +.layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 5px 10px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; color: #fff;} .layui-layer-tips .layui-layer-close{right:-2px; top:-1px;} .layui-layer-tips i.layui-layer-TipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;} -.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color:#FF9900;} +.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;} .layui-layer-tips i.layui-layer-TipsT{bottom:-8px;} .layui-layer-tips i.layui-layer-TipsB{top:-8px;} -.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color:#FF9900;} +.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color: #000;} .layui-layer-tips i.layui-layer-TipsR{left:-8px;} .layui-layer-tips i.layui-layer-TipsL{right:-8px;} @@ -181,6 +147,8 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19 /* prompt模式 */ .layui-layer-prompt .layui-layer-input{display:block; width:220px; height:30px; margin:0 auto; line-height:30px; padding: 0 5px; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color:#333;} .layui-layer-prompt textarea.layui-layer-input{width:300px; height:100px; line-height:20px;} +.layui-layer-prompt .layui-layer-content{padding: 20px;} +.layui-layer-prompt .layui-layer-btn{padding-top: 0;} /* tab模式 */ .layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);}