diff --git a/docs/layer/examples/other.md b/docs/layer/examples/other.md index fa4341b8..2d607b1e 100644 --- a/docs/layer/examples/other.md +++ b/docs/layer/examples/other.md @@ -68,7 +68,7 @@ layui.use(function(){ } ] }, - hideFooter: true // 是否隐藏底部栏 --- 2.8+ + footer: false // 是否显示底部栏 --- 2.8.16+ }); }, 'test-tips-photos': function(){ @@ -98,4 +98,4 @@ layui.use(function(){ } }) }); - \ No newline at end of file + diff --git a/docs/layer/index.md b/docs/layer/index.md index a91be9d5..9ec0acc9 100644 --- a/docs/layer/index.md +++ b/docs/layer/index.md @@ -248,9 +248,9 @@ layer.prompt({ | 私有属性 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | photos | 图片层的数据源，格式详见下述示例。 | object | - | -| hideFooter 2.8+ | 是否隐藏底部栏 | boolean | `false` | +| toolbar 2.8.16+ | 是否显示顶部工具栏 | boolean | `true` | +| footer 2.8.16+ | 是否隐藏底部栏 | boolean | `true` | | tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - | -| toolbar 2.8.16+ | 是否显示顶部工具栏 | boolean | `false` | 该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。 diff --git a/examples/layer.html b/examples/layer.html index 78ee296e..e7ac981a 100644 --- a/examples/layer.html +++ b/examples/layer.html @@ -1,20 +1,15 @@ - - - - -layer 弹层 - layui - - - - + + + layer 弹层 - layui + + @@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){ // 相册层 layer.photos({ - photos: '#photos' //$('#photos') + photos: '#photos', // $('#photos') + // toolbar: false, + // footer: false }); //动态追加 diff --git a/src/css/modules/layer.css b/src/css/modules/layer.css index 8b9dfb27..937ae235 100644 --- a/src/css/modules/layer.css +++ b/src/css/modules/layer.css @@ -238,29 +238,28 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-tabmain .layui-layer-tabli{display:none;} .layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;} -/* photo模式 */ +/* photos */ .layui-layer-photos{background: none; box-shadow: none;} -.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;} -.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;} -.layui-layer-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;} -.layui-layer-imgprev{left: 32px;} -.layui-layer-imgnext{right: 32px;} -.layui-layer-imgprev:hover, -.layui-layer-imgnext:hover{color: #959595;} -.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} -.layui-layer-imgtit{/*position:absolute; left:20px;*/} -.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding: 0 5px; font-size:12px; color: #fff;} -.layui-layer-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;} -.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;} -.layui-layer-imgtit em{font-style: normal;} +.layui-layer-photos .layui-layer-content{overflow: visible; text-align: center;} +.layui-layer-photos .layer-layer-photos-main img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;} +.layui-layer-photos-prev, +.layui-layer-photos-next{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;} +.layui-layer-photos-prev{left: 32px;} +.layui-layer-photos-next{right: 32px;} +.layui-layer-photos-prev:hover, +.layui-layer-photos-next:hover{color: #959595;} + +.layui-layer-photos-toolbar{position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; line-height: 52px; background-color: #000\9; filter: Alpha(opacity=60); background-color: rgba(0,0,0,.32); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} +.layui-layer-photos-toolbar > *{display:inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display:inline; *zoom: 1;} +.layui-layer-photos-toolbar *{font-size: 12px;} +.layui-layer-photos-header{top: 0; bottom: auto;} +.layui-layer-photos-header > span{cursor: pointer;} +.layui-layer-photos-header > span:hover{background-color: rgba(51,51,51,.32);} +.layui-layer-photos-header .layui-icon{font-size: 18px;} +.layui-layer-photos-footer > h3{max-width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} +.layui-layer-photos-footer a:hover{text-decoration: underline;} +.layui-layer-photos-footer em{font-style: normal;} -/*photo工具栏*/ -.layui-layer-images-toolbar{position: fixed;top: 0;left: 0;right: 0;height: 40px;background-color: #000\9;filter: Alpha(opacity=60);background-color: rgba(2,0,0,.35);display: flex;align-items: center;justify-content: center;color: white;} -.layui-layer-images-toolbar .layer-images-tool-item{position: relative;width: auto;height: 100%;display: flex;align-items: center;} -.layui-layer-images-toolbar .layer-images-tool-item span{padding: 8px 10px; transition: all .4s;cursor: pointer;} -.layui-layer-images-toolbar .layer-images-tool-item span:hover{background-color: rgba(64, 64, 64, 0.67);} -.layui-layer-images-toolbar .layer-images-tool-item span i{font-size: 22px;} -.layui-layer-photos .layui-layer-content.layui-layer-images-toolbar-mode{overflow: visible !important;} /* 关闭动画 */ @-webkit-keyframes layer-bounceOut { diff --git a/src/modules/layer.js b/src/modules/layer.js index 6c211917..fe2aab1f 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -1,4 +1,4 @@ -/** +/** * layer * 通用 Web 弹出层组件 */ @@ -1353,9 +1353,9 @@ layer.prompt = function(options, yes){ layer.tab = function(options){ options = options || {}; - var tab = options.tab || {} - ,THIS = 'layui-this' - ,success = options.success; + var tab = options.tab || {}; + var THIS = 'layui-this'; + var success = options.success; delete options.success; @@ -1398,10 +1398,16 @@ layer.tab = function(options){ }, options)); }; -// 相册层 +// 图片层 layer.photos = function(options, loop, key){ var dict = {}; - options = options || {}; + + // 默认属性 + options = $.extend(true, { + toolbar: true, + footer: true + }, options); + if(!options.photos) return; // 若 photos 并非选择器或 jQuery 对象，则为普通 object @@ -1409,11 +1415,10 @@ layer.photos = function(options, loop, key){ var photos = isObject ? options.photos : {}; var data = photos.data || []; var start = photos.start || 0; + var success = options.success; dict.imgIndex = (start|0) + 1; options.img = options.img || 'img'; - - var success = options.success; delete options.success; // 若 options.photos 不是一个对象 @@ -1450,8 +1455,7 @@ layer.photos = function(options, loop, key){ }); // 不直接弹出 - if(!loop) return; - + if (!loop) return; } else if (data.length === 0){ return layer.msg('没有图片'); } @@ -1499,103 +1503,88 @@ layer.photos = function(options, loop, key){ } dict.isNumber = function (n) { - return typeof n === 'number' && !isNaN(n); - } - - dict.getTransform = function(options){ - var transforms = []; - var rotate = options.rotate; - var scaleX = options.scaleX; - - if (dict.isNumber(rotate) && rotate !== 0) { - transforms.push('rotate(' + rotate + 'deg)'); - } - - if (dict.isNumber(scaleX) && scaleX !== 1) { - transforms.push('scaleX(' + scaleX + ')'); - } - - return transforms.length ? transforms.join(' ') : 'none'; - } + return typeof n === 'number' && !isNaN(n); + } + + dict.image = {}; + + dict.getTransform = function(opts){ + var transforms = []; + var rotate = opts.rotate; + var scaleX = opts.scaleX; + var scale = opts.scale; + + if (dict.isNumber(rotate) && rotate !== 0) { + transforms.push('rotate(' + rotate + 'deg)'); + } + + if (dict.isNumber(scaleX) && scaleX !== 1) { + transforms.push('scaleX(' + scaleX + ')'); + } + + if (dict.isNumber(scale)) { + transforms.push('scale(' + scale + ')'); + } + + return transforms.length ? transforms.join(' ') : 'none'; + } // 一些动作 - dict.event = function(layero, index){ - /* - dict.bigimg.hover(function(){ - dict.imgsee.show(); - }, function(){ - dict.imgsee.hide(); - }); - */ - - dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){ + dict.event = function(layero, index, that){ + dict.main.find('.layui-layer-photos-prev').on('click', function(event){ event.preventDefault(); dict.imgprev(true); }); - dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){ + dict.main.find('.layui-layer-photos-next').on('click', function(event){ event.preventDefault(); dict.imgnext(true); }); $(document).on('keyup', dict.keyup); - var scalexFlag = true; - //工具栏事件 - layero.off('click').on('click','*[toolbar-event]', function () { - var othis = $(this), event = othis.attr('toolbar-event'); - switch (event) { - case 'rotate': - dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360; - dict.imgElem.css({ - transform: dict.getTransform(dict.image) - }); - break; - case 'scalex': - if (scalexFlag){ - dict.image.scaleX = -1; - scalexFlag = false; - }else { - dict.image.scaleX = 1; - scalexFlag = true; - } - scalexFlag !== scalexFlag; - dict.imgElem.css({ - transform: dict.getTransform(dict.image) - }); - break; - case 'zoom': - var ratio = Number(othis.attr('data-option')); - if (ratio < 0) { - ratio = 1 / (1 - ratio); - } else { - ratio = 1 + ratio; - } - dict.image.width = dict.image.width * ratio; - dict.image.height = dict.image.height * ratio; - dict.imgElem.css({ - width: dict.image.width, - height: dict.image.height, - transform: dict.getTransform(dict.image) - }); - break; - case 'reset': - scalexFlag = true; - dict.image.scaleX = 1; - dict.image.rotate = 0; - dict.image.width = dict.image.oldWidth; - dict.image.height = dict.image.oldHeight; - dict.imgElem.css({ - width: dict.image.oldWidth, - height: dict.image.oldHeight, - transform: 'none' - }); - break; - case 'close': - layer.close(index); - break; - } - }); + // 头部工具栏事件 + layero.off('click').on('click','*[toolbar-event]', function () { + var othis = $(this), event = othis.attr('toolbar-event'); + switch (event) { + case 'rotate': + dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360; + dict.imgElem.css({ + transform: dict.getTransform(dict.image) + }); + break; + case 'scalex': + dict.image.scaleX = dict.image.scaleX === -1 ? 1 : -1; + dict.imgElem.css({ + transform: dict.getTransform(dict.image) + }); + break; + case 'zoom': + var ratio = Number(othis.attr('data-option')); + dict.image.scale = (dict.image.scale || 1) + ratio; + // 缩小状态最小值 + if (ratio < 0 && dict.image.scale < 0 - ratio) { + dict.image.scale = 0 - ratio; + } + dict.imgElem.css({ + transform: dict.getTransform(dict.image) + }); + break; + case 'reset': + dict.image.scaleX = 1; + dict.image.scale = 1; + dict.image.rotate = 0; + dict.imgElem.css({ + transform: 'none' + }); + break; + case 'close': + layer.close(index); + break; + } + that.offset(); + that.auto(index); + }); }; @@ -1648,81 +1637,65 @@ layer.photos = function(options, loop, key){ imgarea[1] = imgarea[1]/wh[1]; } } - dict.image = { - oldWidth : imgarea[0], - oldHeight : imgarea[1], - width : imgarea[0], - height : imgarea[1], - }; + return [imgarea[0]+'px', imgarea[1]+'px']; }(), title: false, shade: 0.9, shadeClose: true, closeBtn: false, - move: '.layui-layer-phimg img', + move: '.layer-layer-photos-main img', moveType: 1, scrollbar: false, moveOut: true, anim: 5, isOutAnim: false, skin: 'layui-layer-photos' + skin('photos'), - content: '
' - + ''+ alt +'' + content: '
' + + ''+ alt +'' + function(){ - var arr = ['
']; + var arr = ['
']; // 左右箭头翻页 - if(data.length > 1){ - arr.push(['
' - ,'' - ,'' - ,'
'].join('')); + if (data.length > 1) { + arr.push(['
', + '', + '', + '
'].join('')); + } + + // 头部工具栏 + if (options.toolbar) { + arr.push([ + '
', + '', + '', + '', + '', + '', + '', + '
' + ].join('')); } // 底部栏 - if(!options.hideFooter){ - arr.push(['
' - ,'
' - ,'

'+ alt +'

' - ,''+ dict.imgIndex +' / '+ data.length +'' - ,'查看原图' - ,'
' - ,'
'].join('')); - } - //工具栏 - if (options.toolbar){ - arr.push([ - '
', - '
', - '', - '', - '', - '', - '', - '', - '', - '
', - '
' - ].join('')); + if (options.footer) { + arr.push(['
', + '

'+ alt +'

', + ''+ dict.imgIndex +' / '+ data.length +'', + '查看原图', + '
'].join('')); } arr.push('
'); return arr.join(''); }() +'
', - success: function(layero, index){ - dict.bigimg = layero.find('.layui-layer-phimg'); - dict.imgsee = layero.find('.layui-layer-imgbar'); - if (options.toolbar){ - layero.find('.layui-layer-content').addClass('layui-layer-images-toolbar-mode'); - dict.imgElem = dict.bigimg.find('img'); - dict.imgElem.css({ - width : dict.image.width, - height : dict.image.height - }); - } - dict.event(layero, index); + success: function(layero, index, that){ + dict.main = layero.find('.layer-layer-photos-main'); + dict.footer = layero.find('.layui-layer-photos-footer'); + dict.imgElem = dict.main.children('img'); + dict.event(layero, index, that); options.tab && options.tab(data[start], layero); typeof success === 'function' && success(layero); }, end: function(){