floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 layer.photos 头部工具栏和底部栏

Browse Source
This commit is contained in:
贤心 2023-08-24 10:15:53 +08:00
parent 7e60639211
commit 4447ed0953
5 changed files with 155 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/layer/examples/other.md
View File

@ -68,7 +68,7 @@ layui.use(function(){
} }
] ]
}, },
hideFooter: true // 是否隐藏底部栏 --- 2.8+ footer: false // 是否显示底部栏 --- 2.8.16+
}); });
}, },
'test-tips-photos': function(){ 'test-tips-photos': function(){
@ -98,4 +98,4 @@ layui.use(function(){
} }
}) })
}); });
</script> </script>

4
docs/layer/index.md
View File

@ -248,9 +248,9 @@ layer.prompt({
| 私有属性 | 描述 | 类型 | 默认值 | | 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| photos | 图片层的数据源，格式详见下述示例。 | object | - | | photos | 图片层的数据源，格式详见下述示例。 | object | - |
| hideFooter <sup>2.8+</sup> | 是否隐藏底部栏 | boolean | `false` | | toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `true` |
| footer <sup>2.8.16+</sup> | 是否隐藏底部栏 | boolean | `true` |
| tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - | | tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - |
| toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `false` |
该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。 该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。

27
examples/layer.html
View File

@ -1,20 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer 弹层 - layui</title> <title>layer 弹层 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css"> <style>
body{padding: 100px;}
<style> #photos li{float: left; margin: 0 1px 1px;}
body{padding: 100px;} #photos img{max-height: 38px;}
</style>
#photos li{float: left; margin: 0 1px 1px;}
#photos img{max-height: 38px;}
</style>
</head> </head>
<body> <body>
@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){
// 相册层 // 相册层
layer.photos({ layer.photos({
photos: '#photos' //$('#photos') photos: '#photos', // $('#photos')
// toolbar: false,
// footer: false
}); });
//动态追加 //动态追加

41
src/css/modules/layer.css
View File

@ -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{display:none;}
.layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;} .layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
/* photo模式 */ /* photos */
.layui-layer-photos{background: none; box-shadow: none;} .layui-layer-photos{background: none; box-shadow: none;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;} .layui-layer-photos .layui-layer-content{overflow: visible; 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-photos .layer-layer-photos-main 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-photos-prev,
.layui-layer-imgprev{left: 32px;} .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-imgnext{right: 32px;} .layui-layer-photos-prev{left: 32px;}
.layui-layer-imgprev:hover, .layui-layer-photos-next{right: 32px;}
.layui-layer-imgnext:hover{color: #959595;} .layui-layer-photos-prev:hover,
.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-photos-next:hover{color: #959595;}
.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-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-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;} .layui-layer-photos-toolbar > *{display:inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display:inline; *zoom: 1;}
.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;} .layui-layer-photos-toolbar *{font-size: 12px;}
.layui-layer-imgtit em{font-style: normal;} .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 { @-webkit-keyframes layer-bounceOut {

265
src/modules/layer.js
View File

@ -1,4 +1,4 @@
/** /**
* layer * layer
* 通用 Web 弹出层组件 * 通用 Web 弹出层组件
*/ */
@ -1353,9 +1353,9 @@ layer.prompt = function(options, yes){
layer.tab = function(options){ layer.tab = function(options){
options = options || {}; options = options || {};
var tab = options.tab || {} var tab = options.tab || {};
,THIS = 'layui-this' var THIS = 'layui-this';
,success = options.success; var success = options.success;
delete options.success; delete options.success;
@ -1398,10 +1398,16 @@ layer.tab = function(options){
}, options)); }, options));
}; };
// 相册层 // 图片层
layer.photos = function(options, loop, key){ layer.photos = function(options, loop, key){
var dict = {}; var dict = {};
options = options || {};
// 默认属性
options = $.extend(true, {
toolbar: true,
footer: true
}, options);
if(!options.photos) return; if(!options.photos) return;
// 若 photos 并非选择器或 jQuery 对象，则为普通 object // 若 photos 并非选择器或 jQuery 对象，则为普通 object
@ -1409,11 +1415,10 @@ layer.photos = function(options, loop, key){
var photos = isObject ? options.photos : {}; var photos = isObject ? options.photos : {};
var data = photos.data || []; var data = photos.data || [];
var start = photos.start || 0; var start = photos.start || 0;
var success = options.success;
dict.imgIndex = (start|0) + 1; dict.imgIndex = (start|0) + 1;
options.img = options.img || 'img'; options.img = options.img || 'img';
var success = options.success;
delete options.success; delete options.success;
// 若 options.photos 不是一个对象 // 若 options.photos 不是一个对象
@ -1450,8 +1455,7 @@ layer.photos = function(options, loop, key){
}); });
// 不直接弹出 // 不直接弹出
if(!loop) return; if (!loop) return;
} else if (data.length === 0){ } else if (data.length === 0){
return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;'); return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;');
} }
@ -1499,103 +1503,88 @@ layer.photos = function(options, loop, key){
} }
dict.isNumber = function (n) { dict.isNumber = function (n) {
return typeof n === 'number' && !isNaN(n); return typeof n === 'number' && !isNaN(n);
} }
dict.getTransform = function(options){ dict.image = {};
var transforms = [];
var rotate = options.rotate; dict.getTransform = function(opts){
var scaleX = options.scaleX; var transforms = [];
var rotate = opts.rotate;
if (dict.isNumber(rotate) && rotate !== 0) { var scaleX = opts.scaleX;
transforms.push('rotate(' + rotate + 'deg)'); var scale = opts.scale;
}
if (dict.isNumber(rotate) && rotate !== 0) {
if (dict.isNumber(scaleX) && scaleX !== 1) { transforms.push('rotate(' + rotate + 'deg)');
transforms.push('scaleX(' + scaleX + ')'); }
}
if (dict.isNumber(scaleX) && scaleX !== 1) {
return transforms.length ? transforms.join(' ') : 'none'; transforms.push('scaleX(' + scaleX + ')');
} }
if (dict.isNumber(scale)) {
transforms.push('scale(' + scale + ')');
}
return transforms.length ? transforms.join(' ') : 'none';
}
// 一些动作 // 一些动作
dict.event = function(layero, index){ dict.event = function(layero, index, that){
/* dict.main.find('.layui-layer-photos-prev').on('click', function(event){
dict.bigimg.hover(function(){
dict.imgsee.show();
}, function(){
dict.imgsee.hide();
});
*/
dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){
event.preventDefault(); event.preventDefault();
dict.imgprev(true); 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(); event.preventDefault();
dict.imgnext(true); dict.imgnext(true);
}); });
$(document).on('keyup', dict.keyup); $(document).on('keyup', dict.keyup);
var scalexFlag = true; // 头部工具栏事件
//工具栏事件 layero.off('click').on('click','*[toolbar-event]', function () {
layero.off('click').on('click','*[toolbar-event]', function () { var othis = $(this), event = othis.attr('toolbar-event');
var othis = $(this), event = othis.attr('toolbar-event'); switch (event) {
switch (event) { case 'rotate':
case 'rotate': dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360;
dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360; dict.imgElem.css({
dict.imgElem.css({ transform: dict.getTransform(dict.image)
transform: dict.getTransform(dict.image) });
}); break;
break; case 'scalex':
case 'scalex': dict.image.scaleX = dict.image.scaleX === -1 ? 1 : -1;
if (scalexFlag){ dict.imgElem.css({
dict.image.scaleX = -1; transform: dict.getTransform(dict.image)
scalexFlag = false; });
}else { break;
dict.image.scaleX = 1; case 'zoom':
scalexFlag = true; var ratio = Number(othis.attr('data-option'));
} dict.image.scale = (dict.image.scale || 1) + ratio;
scalexFlag !== scalexFlag; // 缩小状态最小值
dict.imgElem.css({ if (ratio < 0 && dict.image.scale < 0 - ratio) {
transform: dict.getTransform(dict.image) dict.image.scale = 0 - ratio;
}); }
break; dict.imgElem.css({
case 'zoom': transform: dict.getTransform(dict.image)
var ratio = Number(othis.attr('data-option')); });
if (ratio < 0) { break;
ratio = 1 / (1 - ratio); case 'reset':
} else { dict.image.scaleX = 1;
ratio = 1 + ratio; dict.image.scale = 1;
} dict.image.rotate = 0;
dict.image.width = dict.image.width * ratio; dict.imgElem.css({
dict.image.height = dict.image.height * ratio; transform: 'none'
dict.imgElem.css({ });
width: dict.image.width, break;
height: dict.image.height, case 'close':
transform: dict.getTransform(dict.image) layer.close(index);
}); break;
break; }
case 'reset': that.offset();
scalexFlag = true; that.auto(index);
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;
}
});
}; };
@ -1648,81 +1637,65 @@ layer.photos = function(options, loop, key){
imgarea[1] = imgarea[1]/wh[1]; 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']; return [imgarea[0]+'px', imgarea[1]+'px'];
}(), }(),
title: false, title: false,
shade: 0.9, shade: 0.9,
shadeClose: true, shadeClose: true,
closeBtn: false, closeBtn: false,
move: '.layui-layer-phimg img', move: '.layer-layer-photos-main img',
moveType: 1, moveType: 1,
scrollbar: false, scrollbar: false,
moveOut: true, moveOut: true,
anim: 5, anim: 5,
isOutAnim: false, isOutAnim: false,
skin: 'layui-layer-photos' + skin('photos'), skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">' content: '<div class="layer-layer-photos-main">'
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">' + '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ (data[start].pid || '') +'">'
+ function(){ + function(){
var arr = ['<div class="layui-layer-imgsee">']; var arr = ['<div class="layui-layer-photos-pointer">'];
// 左右箭头翻页 // 左右箭头翻页
if(data.length > 1){ if (data.length > 1) {
arr.push(['<div class="layui-layer-imguide">' arr.push(['<div class="layer-layer-photos-page">',
,'<span class="layui-icon layui-icon-left layui-layer-iconext layui-layer-imgprev"></span>' '<span class="layui-icon layui-icon-left layui-layer-photos-prev"></span>',
,'<span class="layui-icon layui-icon-right layui-layer-iconext layui-layer-imgnext"></span>' '<span class="layui-icon layui-icon-right layui-layer-photos-next"></span>',
,'</div>'].join('')); '</div>'].join(''));
}
// 头部工具栏
if (options.toolbar) {
arr.push([
'<div class="layui-layer-photos-toolbar layui-layer-photos-header">',
'<span toolbar-event="rotate" data-option="90" title="旋转"><i class="layui-icon layui-icon-refresh"></i></span>',
'<span toolbar-event="scalex" title="变换"><i class="layui-icon layui-icon-slider"></i></span>',
'<span toolbar-event="zoom" data-option="0.1" title="放大"><i class="layui-icon layui-icon-add-circle"></i></span>',
'<span toolbar-event="zoom" data-option="-0.1" title="缩小"><i class="layui-icon layui-icon-reduce-circle"></i></span>',
'<span toolbar-event="reset" title="还原"><i class="layui-icon layui-icon-refresh-1"></i></span>',
'<span toolbar-event="close" title="关闭"><i class="layui-icon layui-icon-close"></i></span>',
'</div>'
].join(''));
} }
// 底部栏 // 底部栏
if(!options.hideFooter){ if (options.footer) {
arr.push(['<div class="layui-layer-imgbar">' arr.push(['<div class="layui-layer-photos-toolbar layui-layer-photos-footer">',
,'<div class="layui-layer-imgtit">' '<h3>'+ alt +'</h3>',
,'<h3>'+ alt +'</h3>' '<em>'+ dict.imgIndex +' / '+ data.length +'</em>',
,'<em>'+ dict.imgIndex +' / '+ data.length +'</em>' '<a href="'+ data[start].src +'" target="_blank">查看原图</a>',
,'<a href="'+ data[start].src +'" target="_blank">查看原图</a>' '</div>'].join(''));
,'</div>'
,'</div>'].join(''));
}
//工具栏
if (options.toolbar){
arr.push([
'<div class="layui-layer-images-toolbar">',
'<div class="layer-images-tool-item">',
'<span toolbar-event="rotate" data-option="-15" title="向左旋转15°" style="transform: scaleX(-1);"><i class="layui-icon layui-icon-refresh rotate"></i></span>',
'<span toolbar-event="rotate" data-option="15" title="向右旋转15°"><i class="layui-icon layui-icon-refresh"></i></span>',
'<span toolbar-event="scalex" title="翻转"><i class="layui-icon layui-icon-slider"></i></span>',
'<span toolbar-event="zoom" data-option="0.1" title="放大图片"><i class="layui-icon layui-icon-add-circle"></i></span>',
'<span toolbar-event="zoom" data-option="-0.1" title="缩小图片"><i class="layui-icon layui-icon-reduce-circle"></i></span>',
'<span toolbar-event="reset" title="重置图片"><i class="layui-icon layui-icon-refresh-1"></i></span>',
'<span toolbar-event="close" title="关闭"><i class="layui-icon layui-icon-close"></i></span>',
'</div>',
'</div>'
].join(''));
} }
arr.push('</div>'); arr.push('</div>');
return arr.join(''); return arr.join('');
}() }()
+'</div>', +'</div>',
success: function(layero, index){ success: function(layero, index, that){
dict.bigimg = layero.find('.layui-layer-phimg'); dict.main = layero.find('.layer-layer-photos-main');
dict.imgsee = layero.find('.layui-layer-imgbar'); dict.footer = layero.find('.layui-layer-photos-footer');
if (options.toolbar){ dict.imgElem = dict.main.children('img');
layero.find('.layui-layer-content').addClass('layui-layer-images-toolbar-mode'); dict.event(layero, index, that);
dict.imgElem = dict.bigimg.find('img');
dict.imgElem.css({
width : dict.image.width,
height : dict.image.height
});
}
dict.event(layero, index);
options.tab && options.tab(data[start], layero); options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero); typeof success === 'function' && success(layero);
}, end: function(){ }, end: function(){