优化 layer.photos 头部工具栏和底部栏
This commit is contained in:
贤心
parent
7e60639211
commit
4447ed0953
@ -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(){
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -248,9 +248,9 @@ layer.prompt({
|
||||
| 私有属性 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 | - |
|
||||
| toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `false` |
|
||||
|
||||
该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。
|
||||
|
||||
|
||||
@ -1,20 +1,15 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layer 弹层 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 100px;}
|
||||
|
||||
#photos li{float: left; margin: 0 1px 1px;}
|
||||
#photos img{max-height: 38px;}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layer 弹层 - layui</title>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding: 100px;}
|
||||
#photos li{float: left; margin: 0 1px 1px;}
|
||||
#photos img{max-height: 38px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
|
||||
// 相册层
|
||||
layer.photos({
|
||||
photos: '#photos' //$('#photos')
|
||||
photos: '#photos', // $('#photos')
|
||||
// toolbar: false,
|
||||
// footer: false
|
||||
});
|
||||
|
||||
//动态追加
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: '<div class="layui-layer-phimg">'
|
||||
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">'
|
||||
content: '<div class="layer-layer-photos-main">'
|
||||
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ (data[start].pid || '') +'">'
|
||||
+ function(){
|
||||
var arr = ['<div class="layui-layer-imgsee">'];
|
||||
var arr = ['<div class="layui-layer-photos-pointer">'];
|
||||
|
||||
// 左右箭头翻页
|
||||
if(data.length > 1){
|
||||
arr.push(['<div class="layui-layer-imguide">'
|
||||
,'<span class="layui-icon layui-icon-left layui-layer-iconext layui-layer-imgprev"></span>'
|
||||
,'<span class="layui-icon layui-icon-right layui-layer-iconext layui-layer-imgnext"></span>'
|
||||
,'</div>'].join(''));
|
||||
if (data.length > 1) {
|
||||
arr.push(['<div class="layer-layer-photos-page">',
|
||||
'<span class="layui-icon layui-icon-left layui-layer-photos-prev"></span>',
|
||||
'<span class="layui-icon layui-icon-right layui-layer-photos-next"></span>',
|
||||
'</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){
|
||||
arr.push(['<div class="layui-layer-imgbar">'
|
||||
,'<div class="layui-layer-imgtit">'
|
||||
,'<h3>'+ alt +'</h3>'
|
||||
,'<em>'+ dict.imgIndex +' / '+ data.length +'</em>'
|
||||
,'<a href="'+ data[start].src +'" target="_blank">查看原图</a>'
|
||||
,'</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(''));
|
||||
if (options.footer) {
|
||||
arr.push(['<div class="layui-layer-photos-toolbar layui-layer-photos-footer">',
|
||||
'<h3>'+ alt +'</h3>',
|
||||
'<em>'+ dict.imgIndex +' / '+ data.length +'</em>',
|
||||
'<a href="'+ data[start].src +'" target="_blank">查看原图</a>',
|
||||
'</div>'].join(''));
|
||||
}
|
||||
|
||||
arr.push('</div>');
|
||||
return arr.join('');
|
||||
}()
|
||||
+'</div>',
|
||||
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(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user