升级.net8
This commit is contained in:
@ -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: ['确定','取消'],
|
||||
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('最多输入'+ (options.maxlength || 500) +'个字数', 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('没有图片');
|
||||
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('当前图片地址异常<br>是否继续查看下一张?', {
|
||||
layer.msg('当前图片地址异常,<br>是否继续查看下一张?', {
|
||||
time: 30000,
|
||||
btn: ['下一张', '不看了'],
|
||||
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.$);
|
||||
|
||||
|
Reference in New Issue
Block a user