升级.net8

This commit is contained in:
dell
2024-11-14 09:01:55 +08:00
parent 48e9e27fa0
commit abf72c3d58
86 changed files with 14229 additions and 10612 deletions

View File

@ -1,8 +1,8 @@
/**
/**
* layer
* 通用 Web 弹出层组件
*/
//@ts-ignore
;!function(window, undefined){
"use strict";
@ -30,10 +30,11 @@ var ready = {
removeFocus: true
},
end: {},
beforeEnd: {},
events: {resize: {}},
minStackIndex: 0,
minStackArr: [],
btn: ['确定', '取消'],
btn: ['确定', '取消'],
// 五种原始层模式
type: ['dialog', 'page', 'iframe', 'loading', 'tips'],
@ -258,13 +259,16 @@ doms.anim = {
doms.SHADE = 'layui-layer-shade';
doms.MOVE = 'layui-layer-move';
var SHADE_KEY = 'LAYUI-LAYER-SHADE-KEY';
var RECORD_HEIGHT_KEY = 'LAYUI_LAYER_CONTENT_RECORD_HEIGHT';
// 默认配置
Class.pt.config = {
type: 0,
shade: 0.3,
fixed: true,
move: doms[1],
title: '信息',
title: '信息',
offset: 'auto',
area: 'auto',
closeBtn: 1,
@ -377,7 +381,11 @@ Class.pt.vessel = function(conType, callback){
for(var i = 0, len = config.btn.length; i < len; i++){
button += '<a class="'+ doms[6] +''+ i +'">'+ config.btn[i] +'</a>'
}
return '<div class="'+ doms[6] +' layui-layer-btn-'+ (config.btnAlign||'') +'">'+ button +'</div>'
return '<div class="'+ function(){
var className = [doms[6]];
if(config.btnAlign) className.push(doms[6] + '-' + config.btnAlign);
return className.join(' ');
}() +'">'+ button +'</div>'
}() : '')
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
+ '</div>'
@ -393,7 +401,22 @@ Class.pt.creat = function(){
var content = config.content;
var conType = typeof content === 'object';
var body = $('body');
var setAnim = function(layero){
// anim 兼容旧版 shift
if(config.shift){
config.anim = config.shift;
}
// 为兼容 jQuery3.0 的 css 动画影响元素尺寸计算
if(doms.anim[config.anim]){
var animClass = 'layer-anim '+ doms.anim[config.anim];
layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass(animClass);
});
}
}
// 若 id 对应的弹层已经存在,则不重新创建
if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]){
return (function(){
@ -409,12 +432,16 @@ Class.pt.creat = function(){
} else if(options.hideOnClose){
elemShade.show();
layero.show();
setAnim(layero);
setTimeout(function(){
elemShade.css({opacity: elemShade.data(SHADE_KEY)});
}, 10);
}
})();
}
// 是否移除活动元素的焦点
if(config.removeFocus) {
if(config.removeFocus && document.activeElement) {
document.activeElement.blur(); // 将原始的聚焦节点失焦
}
@ -423,11 +450,6 @@ Class.pt.creat = function(){
config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
}
// anim 兼容旧版 shift
if(config.shift){
config.anim = config.shift;
}
if(layer.ie == 6){
config.fixed = false;
}
@ -475,14 +497,16 @@ Class.pt.creat = function(){
that.layero = $('#'+ doms[0] + times);
that.shadeo = $('#'+ doms.SHADE + times);
config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
config.scrollbar || ready.setScrollbar(times);
}).auto(times);
// 遮罩
that.shadeo.css({
'background-color': config.shade[1] || '#000'
,'opacity': config.shade[0] || config.shade
,'transition': config.shade[2] || ''
});
that.shadeo.data(SHADE_KEY, config.shade[0] || config.shade);
config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
@ -514,14 +538,7 @@ Class.pt.creat = function(){
layer.close(that.index);
}, config.time);
that.move().callback();
// 为兼容 jQuery3.0 的 css 动画影响元素尺寸计算
if(doms.anim[config.anim]){
var animClass = 'layer-anim '+ doms.anim[config.anim];
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass(animClass);
});
}
setAnim(that.layero);
// 记录配置信息
that.layero.data('config', config);
@ -667,13 +684,15 @@ Class.pt.tips = function(){
};
// 辨别 tips 的方位
// 21 为箭头大小 8*2 + 箭头相对父元素的top偏移 5
goal.where = [function(){ // 上
goal.autoLeft();
goal.tipTop = goal.top - layArea[1] - 10;
tipsG.removeClass('layui-layer-TipsB').addClass('layui-layer-TipsT').css('border-right-color', config.tips[1]);
}, function(){ // 右
goal.tipLeft = goal.left + goal.width + 10;
goal.tipTop = goal.top;
goal.tipTop = goal.top - (goal.height * 0.75 < 21 ? 21 - goal.height * 0.5 : 0);
goal.tipTop = Math.max(goal.tipTop, 0);
tipsG.removeClass('layui-layer-TipsL').addClass('layui-layer-TipsR').css('border-bottom-color', config.tips[1]);
}, function(){ // 下
goal.autoLeft();
@ -681,7 +700,8 @@ Class.pt.tips = function(){
tipsG.removeClass('layui-layer-TipsT').addClass('layui-layer-TipsB').css('border-right-color', config.tips[1]);
}, function(){ // 左
goal.tipLeft = goal.left - layArea[0] - 10;
goal.tipTop = goal.top;
goal.tipTop = goal.top - (goal.height * 0.75 < 21 ? 21 - goal.height * 0.5 : 0);
goal.tipTop = Math.max(goal.tipTop, 0);
tipsG.removeClass('layui-layer-TipsR').addClass('layui-layer-TipsL').css('border-bottom-color', config.tips[1]);
}];
goal.where[guide-1]();
@ -839,6 +859,16 @@ Class.pt.move = function(){
return that;
};
Class.pt.btnLoading = function(btnElem, isLoading){
if(isLoading){
var loadingTpl = '<i class="layui-layer-btn-loading-icon layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>';
if(btnElem.find('.layui-layer-btn-loading-icon')[0]) return;
btnElem.addClass('layui-layer-btn-is-loading').attr({disabled: ''}).prepend(loadingTpl);
}else{
btnElem.removeClass('layui-layer-btn-is-loading').removeAttr('disabled').find('.layui-layer-btn-loading-icon').remove();
}
}
Class.pt.callback = function(){
var that = this, layero = that.layero, config = that.config;
that.openLayer();
@ -855,18 +885,42 @@ Class.pt.callback = function(){
// 按钮
layero.find('.'+ doms[6]).children('a').on('click', function(){
var index = $(this).index();
if(index === 0){
if(config.yes){
config.yes(that.index, layero, that);
} else if(config['btn1']){
config['btn1'](that.index, layero, that);
} else {
var btnElem = $(this);
var index = btnElem.index();
if(btnElem.attr('disabled')) return;
// 若为异步按钮
if(config.btnAsync){
var btnCallback = index === 0 ? (config.yes || config['btn1']) : config['btn'+(index+1)];
that.loading = function(isLoading){
that.btnLoading(btnElem, isLoading);
}
if(btnCallback){
ready.promiseLikeResolve(btnCallback.call(config, that.index, layero, that))
.then(function(result){
if(result !== false){
layer.close(that.index)
}
}, function(reason){
reason !== undefined && window.console && window.console.error('layer error hint: ' + reason);
});
}else{
layer.close(that.index);
}
} else {
var close = config['btn'+(index+1)] && config['btn'+(index+1)](that.index, layero, that);
close === false || layer.close(that.index);
} else { // 普通按钮
if(index === 0){
if(config.yes){
config.yes(that.index, layero, that);
} else if(config['btn1']){
config['btn1'](that.index, layero, that);
} else {
layer.close(that.index);
}
} else {
var close = config['btn'+(index+1)] && config['btn'+(index+1)](that.index, layero, that);
close === false || layer.close(that.index);
}
}
});
@ -906,6 +960,7 @@ Class.pt.callback = function(){
});
config.end && (ready.end[that.index] = config.end);
config.beforeEnd && (ready.beforeEnd[that.index] = $.proxy(config.beforeEnd, config, layero, that.index, that));
};
// for ie6 恢复 select
@ -950,27 +1005,47 @@ Class.pt.openLayer = function(){
// 记录宽高坐标,用于还原
ready.record = function(layero){
if(!layero[0]) return window.console && console.error('index error');
var type = layero.attr('type');
var contentElem = layero.find('.layui-layer-content');
var contentRecordHeightElem = type === ready.type[2] ? contentElem.children('iframe') : contentElem;
var area = [
layero[0].style.width || layero.width(),
layero[0].style.height || layero.height(),
layero[0].style.width || ready.getStyle(layero[0], 'width'),
layero[0].style.height || ready.getStyle(layero[0], 'height'),
layero.position().top,
layero.position().left + parseFloat(layero.css('margin-left'))
];
layero.find('.layui-layer-max').addClass('layui-layer-maxmin');
layero.attr({area: area});
contentElem.data(RECORD_HEIGHT_KEY, ready.getStyle(contentRecordHeightElem[0], 'height'));
};
ready.rescollbar = function(index){
// 设置页面滚动条
ready.setScrollbar = function(index){
doms.html.css('overflow', 'hidden').attr('layer-full', index);
};
// 恢复页面滚动条
ready.restScrollbar = function(index){
if(doms.html.attr('layer-full') == index){
if(doms.html[0].style.removeProperty){
doms.html[0].style.removeProperty('overflow');
} else {
doms.html[0].style.removeAttribute('overflow');
}
doms.html[0].style[doms.html[0].style.removeProperty
? 'removeProperty'
: 'removeAttribute']('overflow');
doms.html.removeAttr('layer-full');
}
};
// 类似 Promise.resolve
ready.promiseLikeResolve = function(value){
var deferred = $.Deferred();
if(value && typeof value.then === 'function'){
value.then(deferred.resolve, deferred.reject);
}else{
deferred.resolve(value);
}
return deferred.promise();
}
/** 内置成员 */
window.layer = layer;
@ -1005,7 +1080,7 @@ layer.iframeSrc = function(index, url){
// 设定层的样式
layer.style = function(index, options, limit){
var layero = $('#'+ doms[0] + index);
var contElem = layero.find('.layui-layer-content');
var contentElem = layero.find('.layui-layer-content');
var type = layero.attr('type');
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
@ -1033,10 +1108,10 @@ layer.style = function(index, options, limit){
height: (typeof options.height === 'number' ? options.height : layero.height()) - titHeight - btnHeight
});
} else {
contElem.css({
contentElem.css({
height: (typeof options.height === 'number' ? options.height : layero.height()) - titHeight - btnHeight
- parseFloat(contElem.css('padding-top'))
- parseFloat(contElem.css('padding-bottom'))
- parseFloat(contentElem.css('padding-top'))
- parseFloat(contentElem.css('padding-bottom'))
})
}
};
@ -1097,7 +1172,7 @@ layer.min = function(index, options){
elemMin.hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
ready.restScrollbar(index);
// 隐藏遮罩
shadeo.hide();
@ -1107,8 +1182,11 @@ layer.min = function(index, options){
layer.restore = function(index){
var layero = $('#'+ doms[0] + index);
var shadeo = $('#'+ doms.SHADE + index);
var contentElem = layero.find('.layui-layer-content');
var area = layero.attr('area').split(',');
var type = layero.attr('type');
var options = layero.data('config') || {};
var contentRecordHeight = contentElem.data(RECORD_HEIGHT_KEY);
layero.removeData('maxminStatus'); // 移除最大最小状态
@ -1125,7 +1203,16 @@ layer.restore = function(index){
layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
layero.find('.layui-layer-min').show();
type === 'page' && layero.find(doms[4]).show();
ready.rescollbar(index);
// 恢复页面滚动条弹层打开时的状态
options.scrollbar ? ready.restScrollbar(index) : ready.setScrollbar(index);
// #1604
if(contentRecordHeight !== undefined){
contentElem.removeData(RECORD_HEIGHT_KEY);
var contentRecordHeightElem = type === ready.type[2] ? contentElem.children('iframe') : contentElem;
contentRecordHeightElem.css({height: contentRecordHeight});
}
// 恢复遮罩
shadeo.show();
@ -1144,7 +1231,7 @@ layer.full = function(index){
ready.record(layero); // 记录当前尺寸、坐标
if(!doms.html.attr('layer-full')){
doms.html.css('overflow','hidden').attr('layer-full', index);
ready.setScrollbar(index);
}
setTimeout(function(){
@ -1168,10 +1255,10 @@ layer.title = function(name, index){
// 关闭 layer 总方法
layer.close = function(index, callback){
var layero = function(){
var closest = $('.'+ doms[0]).find('#'+ index).closest('.'+ doms[0]);
var closest = $('.'+ doms[0]).children('#'+ index).closest('.'+ doms[0]);
return closest[0] ? (
index = closest.attr('times')
,closest
index = closest.attr('times'),
closest
) : $('#'+ doms[0] + index)
}();
var type = layero.attr('type');
@ -1180,83 +1267,104 @@ layer.close = function(index, callback){
if(!layero[0]) return;
// 关闭动画
var closeAnim = ({
slideDown: 'layer-anim-slide-down-out',
slideLeft: 'layer-anim-slide-left-out',
slideUp: 'layer-anim-slide-up-out',
slideRight: 'layer-anim-slide-right-out'
})[options.anim] || 'layer-anim-close';
// 移除主容器
var remove = function(){
var WRAP = 'layui-layer-wrap';
// 是否关闭时隐藏弹层容器
if(hideOnClose){
layero.removeClass('layer-anim '+ closeAnim);
return layero.hide();
}
// 是否为页面捕获层
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
for(var i = 0; i < 2; i++){
wrap.unwrap();
var executor = function(){
// 关闭动画
var closeAnim = ({
slideDown: 'layer-anim-slide-down-out',
slideLeft: 'layer-anim-slide-left-out',
slideUp: 'layer-anim-slide-up-out',
slideRight: 'layer-anim-slide-right-out'
})[options.anim] || 'layer-anim-close';
// 移除主容器
var remove = function(){
var WRAP = 'layui-layer-wrap';
// 是否关闭时隐藏弹层容器
if(hideOnClose){
layero.removeClass('layer-anim '+ closeAnim);
return layero.hide();
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
// 是否为页面捕获层
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
for(var i = 0; i < 2; i++){
wrap.unwrap();
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} 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();
}
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
typeof callback === 'function' && callback();
// 移除 reisze 事件
if(ready.events.resize[index]){
win.off('resize', ready.events.resize[index]);
delete ready.events.resize[index];
}
};
// 移除遮罩
var shadeo = $('#'+ doms.SHADE + index);
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
shadeo[hideOnClose ? 'hide' : 'remove']();
}else{
shadeo.css({opacity: 0});
setTimeout(function(){
shadeo[hideOnClose ? 'hide' : 'remove']();
}, 350);
}
// 是否允许关闭动画
if(options.isOutAnim){
layero.addClass('layer-anim '+ closeAnim);
}
layer.ie == 6 && ready.reselect();
ready.restScrollbar(index);
// 记住被关闭层的最小化堆叠坐标
if(typeof layero.attr('minLeft') === 'string'){
ready.minStackIndex--;
ready.minStackArr.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
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();
setTimeout(function(){
remove();
}, 200);
}
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
typeof callback === 'function' && callback();
// 移除 reisze 事件
if(ready.events.resize[index]){
win.off('resize', ready.events.resize[index]);
delete ready.events.resize[index];
}
};
// 移除遮罩
var removeShade = (function fn(){
$('#'+ doms.SHADE + index)[
hideOnClose ? 'hide' : 'remove'
]();
})();
// 是否允许关闭动画
if(options.isOutAnim){
layero.addClass('layer-anim '+ closeAnim);
}
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
// 记住被关闭层的最小化堆叠坐标
if(typeof layero.attr('minLeft') === 'string'){
ready.minStackIndex--;
ready.minStackArr.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
remove()
} else {
setTimeout(function(){
remove();
}, 200);
if(!hideOnClose && typeof ready.beforeEnd[index] === 'function'){
ready.promiseLikeResolve(ready.beforeEnd[index]())
.then(function(result){
if(result !== false){
delete ready.beforeEnd[index];
executor();
}
}, function(reason){
reason !== undefined && window.console && window.console.error('layer error hint: ' + reason);
});
}else{
delete ready.beforeEnd[index];
executor();
}
};
@ -1277,9 +1385,19 @@ layer.closeAll = function(type, callback){
};
// 根据弹层类型关闭最近打开的层
layer.closeLast = function(type){
type = type || 'page';
layer.close($('.layui-layer-'+ type +':last').attr("times"));
layer.closeLast = function(type, callback){
var layerIndexList = [];
var isArrayType = $.isArray(type);
$(typeof type === 'string' ? '.layui-layer-' + type : '.layui-layer').each(function(i, el){
var layero = $(el);
var shouldSkip = (isArrayType && type.indexOf(layero.attr('type')) === -1) || layero.css('display') === 'none';
if(shouldSkip) return true;
layerIndexList.push(Number(layero.attr('times')));
});
if(layerIndexList.length > 0){
var layerIndexMax = Math.max.apply(null, layerIndexList);
layer.close(layerIndexMax, callback);
}
};
@ -1317,7 +1435,7 @@ layer.prompt = function(options, yes){
return layer.open($.extend({
type: 1,
btn: ['&#x786E;&#x5B9A;','&#x53D6;&#x6D88;'],
btn: ['确定','取消'],
content: content,
skin: 'layui-layer-prompt' + skin('prompt'),
maxWidth: win.width(),
@ -1330,7 +1448,7 @@ layer.prompt = function(options, yes){
yes: function(index){
var value = prompt.val();
if(value.length > (options.maxlength||500)) {
layer.tips('&#x6700;&#x591A;&#x8F93;&#x5165;'+ (options.maxlength || 500) +'&#x4E2A;&#x5B57;&#x6570;', prompt, {tips: 1});
layer.tips('最多输入'+ (options.maxlength || 500) +'个字符', prompt, {tips: 1});
} else {
yes && yes(value, index, prompt);
}
@ -1342,9 +1460,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;
@ -1387,10 +1505,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
@ -1398,11 +1522,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 不是一个对象
@ -1439,10 +1562,9 @@ layer.photos = function(options, loop, key){
});
// 不直接弹出
if(!loop) return;
if (!loop) return;
} else if (data.length === 0){
return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;');
return layer.msg('没有图片');
}
// 上一张
@ -1486,28 +1608,128 @@ layer.photos = function(options, loop, key){
layer.close(dict.index);
return layer.photos(options, true, key);
}
dict.isNumber = function (n) {
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(){
/*
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);
// 头部工具栏事件
layero.off('click').on('click','*[toolbar-event]', function () {
var othis = $(this);
var 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);
});
// 鼠标滚轮缩放图片事件
dict.main.on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var zoomElem = dict.main.find('[toolbar-event="zoom"]');
if (delta > 0) {
zoomElem.eq(0).trigger('click');
} else {
zoomElem.eq(1).trigger('click');
}
e.preventDefault();
});
// 滑动切换图片事件,仅限 layui 中
if(window.layui || window.lay){
var lay = window.layui.lay || window.lay;
var touchEndCallback = function(e, state){
var duration = Date.now() - state.timeStart;
var speed = state.distanceX / duration;
var threshold = win.width() / 3;
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(state.distanceX) > threshold;
if(!shouldSwipe) return;
if(state.direction === 'left'){
dict.imgnext(true);
}else if(state.direction === 'right'){
dict.imgprev(true);
}
}
$.each([that.shadeo, dict.main], function(i, elem){
lay.touchSwipe(elem, {
onTouchEnd: touchEndCallback
})
})
}
};
// 图片预加载
@ -1528,7 +1750,7 @@ layer.photos = function(options, loop, key){
}
dict.loadi = layer.load(1, {
shade: 'shade' in options ? false : 0.9,
shade: 'shade' in options ? false : [0.9, undefined, 'unset'],
scrollbar: false
});
@ -1559,52 +1781,65 @@ layer.photos = function(options, loop, key){
imgarea[1] = imgarea[1]/wh[1];
}
}
return [imgarea[0]+'px', imgarea[1]+'px'];
}(),
title: false,
shade: 0.9,
shade: [0.9, undefined, 'unset'],
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.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');
dict.event(layero);
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(){
@ -1614,9 +1849,9 @@ layer.photos = function(options, loop, key){
}, options));
}, function(){
layer.close(dict.loadi);
layer.msg('&#x5F53;&#x524D;&#x56FE;&#x7247;&#x5730;&#x5740;&#x5F02;&#x5E38;<br>&#x662F;&#x5426;&#x7EE7;&#x7EED;&#x67E5;&#x770B;&#x4E0B;&#x4E00;&#x5F20;&#xFF1F;', {
layer.msg('当前图片地址异常,<br>是否继续查看下一张?', {
time: 30000,
btn: ['&#x4E0B;&#x4E00;&#x5F20;', '&#x4E0D;&#x770B;&#x4E86;'],
btn: ['下一张', '不看了'],
yes: function(){
data.length > 1 && dict.imgnext(true,true);
}
@ -1628,6 +1863,23 @@ layer.photos = function(options, loop, key){
ready.run = function(_$){
$ = _$;
win = $(window);
// 移动端兼容性处理
// https://gitee.com/layui/layui/issues/I81WGC
// https://github.com/jquery/jquery/issues/1729
var agent = navigator.userAgent.toLowerCase();
var isMobile = /android|iphone|ipod|ipad|ios/.test(agent)
var _win = $(window);
if(isMobile){
$.each({Height: "height", Width: "width"}, function(propSuffix, funcName){
var propName = 'inner' + propSuffix;
win[funcName] = function(){
return propName in window
? window[propName]
: _win[funcName]()
}
})
}
doms.html = $('html');
layer.open = function(deliver){
var o = new Class(deliver);
@ -1638,7 +1890,7 @@ ready.run = function(_$){
// 加载方式
window.layui && layui.define ? (
layer.ready(),
layui.define('jquery', function(exports){ // layui
layui.define(['jquery','lay'], function(exports){ // layui
layer.path = layui.cache.dir;
ready.run(layui.$);