github
/
layer
mirror of https://github.com/layui/layer
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

3.0

pull/36/head
sentsin 2016-11-06 22:53:23 +08:00
parent e8347c4107
commit 20c6d29d3f
3 changed files with 421 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
CHANGELOG.md
View File

@ -1,18 +1,48 @@
# 【2.4】2016.07.03

# 【v3.0】 2016.11.07
* 新增拖动弹层右下角可调节弹层尺寸的功能，由参数resize控制，默认不开启
* offset参数新增 t、r、b、l、lt、lb、rt、rb、的赋值，可快捷实现上、右、下、左、左上角、左下角、右上角、右下角的边缘定位
* 新增btnAlign参数，支持三个参数：l/c/r，分别用于控制按钮居左、居中、居右的快捷设置（默认r，即居右）
* 点击最小化时，自动定位到页面左下角，在出现多个最小化时，会依次排列，这是一次较为重大的完善。
* 新增关闭层的过度动画
* 重写拖拽核心代码，性能大幅度提升
* layer.config核心调整
* layer.config中的extend参数只提供加载一个css皮肤文件（详见文档）
* 处理在head标签中执行layer弹层无效的情况
* 瘦身layer.ready方法
* 修改iframe层的loading动画
* 捕获页类型的弹层在关闭时，会根据所捕获元素的初始display值，进行不同处理，即不再强制隐藏。
* 剔除moveType参数，只提供默认的一种拖拽风格
* 剔除语义欠佳的fix参数，改为fixed取代
* 剔除语义欠佳的shift参数，改为anim取代，不过仍然对shift参数兼容
* 完善tips层细节
* 将prompt层改成页面层结构，即当你弹出prompt层时，再弹出msg，不会将prompt销毁。
* prompt层的textarea模式支持area参数来设定宽高
* layer.css大面积改善
* 修复iframe层在用于iPhone设备时，无法触发滚动的Bug
---
# 【v2.4】2016.07.03
* 兼容jQuery3.0
* 优化tips，可支持配置参数fix（之前是强制fix: false），用于决定是固定的tips还是非固定的。
* min回调可通过return false来设定不执行默认最小化。
* 修复在移动端使用iframe，IOS下无法滑动的bug。
* 细节优化及样式微调
# 【2.3】2016.05.18
# 【v2.3】2016.05.18
* 通过对使用频率的调查，将layer.ext.js（拓展模块）合并到了layer.js，即不用再通过layer.config来加载调用。
* cancel回调不再对第二个按钮有效，只作为右上角关闭按钮触发。并且除yes回调外，所以按钮的回调都可以通过return false来设定不默认关闭。
* 修复相册层，点击任意图片查看，弹出的并非当前图片的bug。
* 修复相册层在移动端显示不佳的bug。
* 修复msg、alert等对话框类型的弹层，在手机使用时未水平居中的bug。
# 【2.2】2015.03.18
# 【v2.2】2016.03.18
* 增加参数id，用于控制弹层唯一标识。如不想重复弹出，可设置该值。
* layer.tips允许出现遮罩，即不对shade参数做限制。
* 对layer.photos方法直接弹出页面图片进行了事件委托，修复了之前由于动态插入的img而无法执行弹出的bug，并且修复了当图片信息改变时，仍然弹出了之前的图片的bug
@ -21,7 +51,7 @@
* 样式微调
# 【2.1】2015.11.04
# 【v2.1】2015.11.04
* 修复在使用seajs或者requirejs后，layer.ext.js报layer未定义的错误。
* 修复弹出层后，回车键无效的bug。
* 修复iframe层的success回调在ie8以下浏览器无效的bug
@ -31,29 +61,31 @@
* 优化图标锯齿消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){}
# 【2.0】2015.09.01
# 【v2.0】2015.09.01
* 全新的默认皮肤
* 修复按住Enter键时，出现不断弹层的bug。
* 修复模块加载时，layer仍然暴露给了全局的bug。
* 修复拖拽完毕回调moveEnd，在层关闭后拖拽鼠标仍然触发该回调的bug。
* 确认和取消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){}
## == 拓展模块 ==
### 拓展模块
* 修复通过script标签引入layer.ext.js时，出现Cannot read property 'skin' of undefined的报错问题。（虽然我们更推荐用layer.config()方式加载layer.ext.js）。
* 如果相册只有一张图片，则不触发上/下一张。
# 【1.9.3】2015.05.23
---
# 【v1.9.3】2015.05.23
* 修复全局设置皮肤时，部分类型层未起作用的bug。
* 增加skin值：layui-layer-rim，用于给层加边框（类似1.85的风格）
* 样式微调
## == 拓展模块 ==
### 拓展模块
* 修复相册层设定基础参数时，只有首次有效的bug。
# 【1.9.2】2015.05.08
# 【v1.9.2】2015.05.08
* 增加关闭动画样式：layui-layer-close
* 优化默认弹出动画
* 优化默认图标，默认的icon支持缩减到0-6（拓展皮肤可自己任意设定支持的数目）
@ -61,7 +93,7 @@
* 机智地修复了一个隐藏得非常深的但是不是太重要的bug。
* 剔除了一些图片。
# 【1.9.1】2015.04.29
# 【v1.9.1】2015.04.29
* btn设定多个按钮时，新增对应的回调（支持只有yes和cancel回调）,如btn: ['按钮一','按钮二','按钮三']，按钮一和按钮二还是之前的yes和cancel，按钮三，则回调为 btn3: function(){}，以此类推。
* 对cancel回调进行了微完善，如果不想关闭，return false即可，如cancel: function(){return false}，取消则不会关闭。
* 修复当设置了fix:false时,offset的设置无效的bug
@ -72,7 +104,7 @@
* 完善当采用script标签合并路径的方式引入layer，加载了错误的css路径的问题。这种情况需在script标签上加一个自定义属性merge="true",然后通过layer.config({path: 'layer所在目录'})来完成初始化的配置
* 样式微调
# 【1.9.0】2015.04.19
# 【v1.9.0】2015.04.19
* 新增laye.open(options)，抛弃了之前的$.layer(options)调用方法，目的是与layer mobile保持统一。
* 新增layer.config(options)方法，用于进行全局化配置。除了用于展现弹层的基础参数外，还支持path，用于模块化加载layer时设定目录以便加载所需配件，如layer.config({path: '所在路径', extend: ''});
@ -107,7 +139,7 @@
* 默认不显示dialog图标，需要显示配置dialog指定的type即可
* 很多不可见只可感受的细节改动
### << 拓展模块 >>
### 拓展模块
* layer.prompt/layer.tab/layer.photos重写，代码更强健，功能更强大，详见Api。
@ -115,11 +147,16 @@
——贤心 2015/4/15
# 【1.8.5】
---
# 【v1.8.5】
* 新增对title样式的自定义控制
* 修复layer.prompt多行文本，设置默认值无效的bug
# 【1.8.4】
# 【v1.8.4】
* 新增浏览器窗口尺寸改变时的自适应定位
* 新增属性shift，用于配置动画弹出（需要注意的是，之前的layer.shift()方法将在layer1.9遗弃，用shift属性取代）
* 新增方法layer.title(name, index); 用于动态改变层的标题。
@ -129,7 +166,7 @@
* 放弃layer.ready方法，用jQuery的ready取代。
* 进一步优化内部代码
## == 拓展模块 ==
### 拓展模块
* layer.prompt支持给表单传入默认值，如layer.prompt({val:'默认'}); 新增yes回调函数第二个参数为索引、第三个参数为表单元素。
* 相册层新增tab回调函数，用于切换图片时进行相关操作
* 相册层内部代码优化。

448
src/layer.js
View File

@ -1,6 +1,6 @@
/*!
/**
@Name：layer v2.4 弹层组件
@Name：layer v3.0 Web弹层组件
@Author：贤心
@Site：http://layer.layui.com
@License：LGPL
@ -10,19 +10,15 @@
;!function(window, undefined){
"use strict";
var $, win, ready = {
var isLayui = window.layui && layui.define, $, win, ready = {
getPath: function(){
var js = document.scripts, script = js[js.length - 1], jsPath = script.src;
if(script.getAttribute('merge')) return;
return jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
}(),
//屏蔽Enter触发弹层
enter: function(e){
if(e.keyCode === 13) e.preventDefault();
},
config: {}, end: {},
btn: ['&#x786E;&#x5B9A;','&#x53D6;&#x6D88;'],
config: {}, end: {}, minIndex: 0, minLeft: [],
btn: ['&#x786E;&#x5B9A;', '&#x53D6;&#x6D88;'],
//五种原始层模式
type: ['dialog', 'page', 'iframe', 'loading', 'tips']
@ -30,58 +26,59 @@ var $, win, ready = {
//默认内置方法。
var layer = {
v: '2.4',
v: '3.0',
ie6: !!window.ActiveXObject&&!window.XMLHttpRequest,
index: (window.layer && window.layer.v) ? 100000 : 0,
path: ready.getPath,
config: function(options, fn){
var item = 0;
options = options || {};
layer.cache = ready.config = $.extend(ready.config, options);
layer.cache = ready.config = $.extend({}, ready.config, options);
layer.path = ready.config.path || layer.path;
typeof options.extend === 'string' && (options.extend = [options.extend]);
layer.use('skin/default/layer.css', (options.extend && options.extend.length > 0) ? (function loop(){
var ext = options.extend;
layer.use(ext[ext[item] ? item : item-1], item < ext.length ? function(){
++item;
return loop;
}() : fn);
}()) : fn);
if(!options.extend) return this;
isLayui
? layui.addcss('modules/layer/' + options.extend)
: layer.link('skin/' + options.extend);
return this;
},
//载入配件
use: function(module, fn, readyMethod){
var i = 0, head = $('head')[0];
var module = module.replace(/\s/g, '');
var iscss = /\.css$/.test(module);
var node = document.createElement(iscss ? 'link' : 'script');
var id = 'layui_layer_' + module.replace(/\.|\//g, '');
//载入CSS配件
link: function(href, fn, cssname){
//未设置路径，则不主动加载css
if(!layer.path) return;
if(iscss){
node.rel = 'stylesheet';
}
node[iscss ? 'href' : 'src'] = /^http:\/\//.test(module) ? module : layer.path + module;
node.id = id;
var head = $('head')[0], link = document.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\//g, '');
var id = 'layuicss-'+app, timeout = 0;
link.rel = 'stylesheet';
link.href = layer.path + href;
link.id = id;
if(!$('#'+ id)[0]){
head.appendChild(node);
head.appendChild(link);
}
//轮询加载就绪
;(function poll() {
;(iscss ? parseInt($('#'+id).css('width')) === 1989 : layer[readyMethod||id]) ? function(){
fn && fn();
try { iscss || head.removeChild(node); } catch(e){};
}() : setTimeout(poll, 100);
if(typeof fn !== 'function') return;
//轮询css是否加载完毕
(function poll() {
if(++timeout > 8 * 1000 / 100){
return window.console && console.error('layer.css: Invalid');
};
parseInt($('#'+id).css('width')) === 1989 ? fn() : setTimeout(poll, 100);
}());
return this;
},
ready: function(path, fn){
var type = typeof path === 'function';
if(type) fn = path;
layer.config($.extend(ready.config, function(){
return type ? {} : {path: path};
}()), fn);
ready: function(callback){
var cssname = 'skinlayercss', ver = '1518';
isLayui ? layui.addcss('modules/layer/default/layer.css?v='+layer.v+ver, callback, cssname)
: layer.link('skin/default/layer.css?v='+layer.v+ver, callback, cssname);
return this;
},
@ -112,7 +109,7 @@ var layer = {
msg: function(content, options, end){ //最常用提示层
var type = typeof options === 'function', rskin = ready.config.skin;
var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg';
var shift = doms.anim.length - 1;
var anim = doms.anim.length - 1;
if(type) end = options;
return layer.open($.extend({
content: content,
@ -122,10 +119,11 @@ var layer = {
title: false,
closeBtn: false,
btn: false,
resize: false,
end: end
}, (type && !ready.config.skin) ? {
skin: skin + ' layui-layer-hui',
shift: shift
anim: anim
} : function(){
options = options || {};
if(options.icon === -1 || options.icon === undefined && !ready.config.skin){
@ -139,6 +137,7 @@ var layer = {
return layer.open($.extend({
type: 3,
icon: icon || 0,
resize: false,
shade: 0.01
}, options));
},
@ -150,7 +149,8 @@ var layer = {
closeBtn: false,
time: 3000,
shade: false,
fix: false,
resize: false,
fixed: false,
maxWidth: 210
}, options));
}
@ -160,7 +160,9 @@ var Class = function(setings){
var that = this;
that.index = ++layer.index;
that.config = $.extend({}, that.config, ready.config, setings);
document.body ? that.creat() : setTimeout(function(){
that.creat();
}, 50);
};
Class.pt = Class.prototype;
@ -173,7 +175,7 @@ doms.anim = ['layer-anim', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'l
Class.pt.config = {
type: 0,
shade: 0.3,
fix: true,
fixed: true,
move: doms[1],
title: '&#x4FE1;&#x606F;',
offset: 'auto',
@ -182,8 +184,10 @@ Class.pt.config = {
time: 0, //0表示不自动关闭
zIndex: 19891014,
maxWidth: 360,
shift: 0,
anim: 0,
icon: -1,
moveType: 1,
resize: true,
scrollbar: true, //是否允许浏览器滚动条
tips: 2
};
@ -203,12 +207,12 @@ Class.pt.vessel = function(conType, callback){
config.shade ? ('<div class="layui-layer-shade" id="layui-layer-shade'+ times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; background-color:'+ (config.shade[1]||'#000') +'; opacity:'+ (config.shade[0]||config.shade) +'; filter:alpha(opacity='+ (config.shade[0]*100||config.shade*100) +');') +'"></div>') : '',
//主体
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fix ? '' : ';position:absolute;') +'">'
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fixed ? '' : ';position:absolute;') +'">'
+ (conType && config.type != 2 ? '' : titleHTML)
+'<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
+ '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
+ (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
+ (config.type == 1 && conType ? '' : (config.content||''))
+'</div>'
+ '</div>'
+ '<span class="layui-layer-setwin">'+ function(){
var closebtn = ismax ? '<a class="layui-layer-min" href="javascript:;"><cite></cite></a><a class="layui-layer-ico layui-layer-max" href="javascript:;"></a>' : '';
config.closeBtn && (closebtn += '<a class="layui-layer-ico '+ doms[7] +' '+ doms[7] + (config.title ? config.closeBtn : (config.type == 4 ? '1' : '2')) +'" href="javascript:;"></a>');
@ -220,17 +224,22 @@ 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] +'">'+ button +'</div>'
return '<div class="'+ doms[6] +' layui-layer-btn-'+ (config.btnAlign||'') +'">'+ button +'</div>'
}() : '')
+'</div>'
], titleHTML);
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
+ '</div>'
], titleHTML, $('<div class="layui-layer-move"></div>'));
return that;
};
//创建骨架
Class.pt.creat = function(){
var that = this, config = that.config, times = that.index, nodeIndex;
var content = config.content, conType = typeof content === 'object';
var that = this
,config = that.config
,times = that.index, nodeIndex
,content = config.content
,conType = typeof content === 'object'
,body = $('body');
if($('#'+config.id)[0]) return;
@ -238,6 +247,11 @@ Class.pt.creat = function(){
config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
}
//anim兼容旧版shift
if(config.shift){
config.anim = config.shift;
}
switch(config.type){
case 0:
config.btn = ('btn' in config) ? config.btn : ready.btn[0];
@ -248,8 +262,8 @@ Class.pt.creat = function(){
config.content = '<iframe scrolling="'+ (config.content[1]||'auto') +'" allowtransparency="true" id="'+ doms[4] +''+ times +'" name="'+ doms[4] +''+ times +'" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + config.content[0] + '"></iframe>';
break;
case 3:
config.title = false;
config.closeBtn = false;
delete config.title;
delete config.closeBtn;
config.icon === -1 && (config.icon === 0);
layer.closeAll('loading');
break;
@ -257,38 +271,35 @@ Class.pt.creat = function(){
conType || (config.content = [config.content, 'body']);
config.follow = config.content[1];
config.content = config.content[0] + '<i class="layui-layer-TipsG"></i>';
config.title = false;
delete config.title;
config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
config.tipsMore || layer.closeAll('tips');
break;
}
//建立容器
that.vessel(conType, function(html, titleHTML){
$('body').append(html[0]);
that.vessel(conType, function(html, titleHTML, moveElem){
body.append(html[0]);
conType ? function(){
(config.type == 2 || config.type == 4) ? function(){
$('body').append(html[1]);
}() : function(){
if(!content.parents('.'+doms[0])[0]){
content.show().addClass('layui-layer-wrap').wrap(html[1]);
content.data('display', content.css('display')).show().addClass('layui-layer-wrap').wrap(html[1]);
$('#'+ doms[0] + times).find('.'+doms[5]).before(titleHTML);
}
}();
}() : $('body').append(html[1]);
}() : body.append(html[1]);
$('.layui-layer-move')[0] || body.append(ready.moveElem = moveElem);
that.layero = $('#'+ doms[0] + times);
config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
}).auto(times);
config.type == 2 && layer.ie6 && that.layero.find('iframe').attr('src', content[0]);
$(document).off('keydown', ready.enter).on('keydown', ready.enter);
that.layero.on('keydown', function(e){
$(document).off('keydown', ready.enter);
});
//坐标自适应浏览器窗口尺寸
config.type == 4 ? that.tips() : that.offset();
if(config.fix){
if(config.fixed){
win.on('resize', function(){
that.offset();
(/^\d+%$/.test(config.area[0]) || /^\d+%$/.test(config.area[1])) && that.auto(times);
@ -302,10 +313,9 @@ Class.pt.creat = function(){
that.move().callback();
//为兼容jQuery3.0的css动画影响元素尺寸计算
if(doms.anim[config.shift]){
that.layero.addClass(doms.anim[config.shift]);
if(doms.anim[config.anim]){
that.layero.addClass(doms.anim[config.anim]);
};
};
//自适应
@ -331,7 +341,7 @@ Class.pt.auto = function(index){
break;
default:
if(config.area[1] === ''){
if(config.fix && area[1] >= win.height()){
if(config.fixed && area[1] >= win.height()){
area[1] = win.height();
setHeight('.'+doms[5]);
}
@ -350,17 +360,39 @@ Class.pt.offset = function(){
var type = typeof config.offset === 'object';
that.offsetTop = (win.height() - area[1])/2;
that.offsetLeft = (win.width() - area[0])/2;
if(type){
that.offsetTop = config.offset[0];
that.offsetLeft = config.offset[1]||that.offsetLeft;
} else if(config.offset !== 'auto'){
that.offsetTop = config.offset;
if(config.offset === 'rb'){ //右下角
if(config.offset === 't'){ //上
that.offsetTop = 0;
} else if(config.offset === 'r'){ //右
that.offsetLeft = win.width() - area[0];
} else if(config.offset === 'b'){ //下
that.offsetTop = win.height() - area[1];
} else if(config.offset === 'l'){ //左
that.offsetLeft = 0;
} else if(config.offset === 'lt'){ //左上角
that.offsetTop = 0;
that.offsetLeft = 0;
} else if(config.offset === 'lb'){ //左下角
that.offsetTop = win.height() - area[1];
that.offsetLeft = 0;
} else if(config.offset === 'rt'){ //右上角
that.offsetTop = 0;
that.offsetLeft = win.width() - area[0];
} else if(config.offset === 'rb'){ //右下角
that.offsetTop = win.height() - area[1];
that.offsetLeft = win.width() - area[0];
} else {
that.offsetTop = config.offset;
}
}
if(!config.fix){
if(!config.fixed){
that.offsetTop = /%$/.test(that.offsetTop) ?
win.height()*parseFloat(that.offsetTop)/100
: parseFloat(that.offsetTop);
@ -370,6 +402,12 @@ Class.pt.offset = function(){
that.offsetTop += win.scrollTop();
that.offsetLeft += win.scrollLeft();
}
if(layero.attr('minLeft')){
that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0);
that.offsetLeft = layero.css('left');
}
layero.css({top: that.offsetTop, left: that.offsetLeft});
};
@ -433,81 +471,99 @@ Class.pt.tips = function(){
'padding-right': (config.closeBtn ? '30px' : '')
});
layero.css({
left: goal.tipLeft - (config.fix ? win.scrollLeft() : 0),
top: goal.tipTop - (config.fix ? win.scrollTop() : 0)
left: goal.tipLeft - (config.fixed ? win.scrollLeft() : 0),
top: goal.tipTop - (config.fixed ? win.scrollTop() : 0)
});
}
//拖拽层
Class.pt.move = function(){
var that = this, config = that.config, conf = {
setY: 0,
moveLayer: function(){
var layero = conf.layero, mgleft = parseInt(layero.css('margin-left'));
var lefts = parseInt(conf.move.css('left'));
mgleft === 0 || (lefts = lefts - mgleft);
if(layero.css('position') !== 'fixed'){
lefts = lefts - layero.parent().offset().left;
conf.setY = 0;
}
layero.css({left: lefts, top: parseInt(conf.move.css('top')) - conf.setY});
}
};
var that = this
,config = that.config
,_DOC = $(document)
,layero = that.layero
,moveElem = layero.find(config.move)
,resizeElem = layero.find('.layui-layer-resize')
,dict = {};
var movedom = that.layero.find(config.move);
config.move && movedom.attr('move', 'ok');
movedom.css({cursor: config.move ? 'move' : 'auto'});
$(config.move).on('mousedown', function(M){
M.preventDefault();
if($(this).attr('move') === 'ok'){
conf.ismove = true;
conf.layero = $(this).parents('.'+ doms[0]);
var xx = conf.layero.offset().left, yy = conf.layero.offset().top, ww = conf.layero.outerWidth() - 6, hh = conf.layero.outerHeight() - 6;
if(!$('#layui-layer-moves')[0]){
$('body').append('<div id="layui-layer-moves" class="layui-layer-moves" style="left:'+ xx +'px; top:'+ yy +'px; width:'+ ww +'px; height:'+ hh +'px; z-index:2147483584"></div>');
if(config.move){
moveElem.css('cursor', 'move');
}
conf.move = $('#layui-layer-moves');
config.moveType && conf.move.css({visibility: 'hidden'});
conf.moveX = M.pageX - conf.move.position().left;
conf.moveY = M.pageY - conf.move.position().top;
conf.layero.css('position') !== 'fixed' || (conf.setY = win.scrollTop());
moveElem.on('mousedown', function(e){
e.preventDefault();
if(config.move){
dict.moveStart = true;
dict.offset = [
e.clientX - parseFloat(layero.css('left'))
,e.clientY - parseFloat(layero.css('top'))
];
ready.moveElem.css('cursor', 'move').show();
}
});
$(document).mousemove(function(M){
if(conf.ismove){
var offsetX = M.pageX - conf.moveX, offsetY = M.pageY - conf.moveY;
M.preventDefault();
resizeElem.on('mousedown', function(e){
e.preventDefault();
dict.resizeStart = true;
dict.offset = [e.clientX, e.clientY];
dict.area = [
layero.outerWidth()
,layero.outerHeight()
];
ready.moveElem.css('cursor', 'se-resize').show();
});
_DOC.on('mousemove', function(e){
//拖拽移动
if(dict.moveStart){
var X = e.clientX - dict.offset[0]
,Y = e.clientY - dict.offset[1]
dict.stX = config.fixed ? 0 : win.scrollLeft();
dict.stY = config.fixed ? 0 : win.scrollTop();
//控制元素不被拖出窗口外
if(!config.moveOut){
conf.setY = win.scrollTop();
var setRig = win.width() - conf.move.outerWidth(), setTop = conf.setY;
offsetX < 0 && (offsetX = 0);
offsetX > setRig && (offsetX = setRig);
offsetY < setTop && (offsetY = setTop);
offsetY > win.height() - conf.move.outerHeight() + conf.setY && (offsetY = win.height() - conf.move.outerHeight() + conf.setY);
var setRig = win.width() - layero.outerWidth() + dict.stX
,setBot = win.height() - layero.outerHeight() + dict.stY;
X < dict.stX && (X = dict.stX);
X > setRig && (X = setRig);
Y < dict.stY && (Y = dict.stY);
Y > setBot && (Y = setBot);
}
conf.move.css({left: offsetX, top: offsetY});
config.moveType && conf.moveLayer();
offsetX = offsetY = setRig = setTop = null;
layero.css({
left: X
,top: Y
});
return false;
}
}).mouseup(function(){
try{
if(conf.ismove){
conf.moveLayer();
conf.move.remove();
//Resize
if(config.resize && dict.resizeStart){
var X = e.clientX - dict.offset[0]
,Y = e.clientY - dict.offset[1]
layer.style(that.index, {
width: dict.area[0] + X
,height: dict.area[1] + Y
})
dict.isResize = true;
return false;
}
}).on('mouseup', function(e){
if(dict.moveStart){
delete dict.moveStart;
ready.moveElem.hide();
config.moveEnd && config.moveEnd();
}
conf.ismove = false;
}catch(e){
conf.ismove = false;
if(dict.resizeStart){
delete dict.resizeStart;
ready.moveElem.hide();
}
});
return that;
};
@ -596,7 +652,7 @@ Class.pt.IE6 = function(layero){
//ie6的固定与相对定位
function ie6Fix(){
layero.css({top : _ieTop + (that.config.fix ? win.scrollTop() : 0)});
layero.css({top : _ieTop + (that.config.fixed ? win.scrollTop() : 0)});
};
ie6Fix();
win.scroll(ie6Fix);
@ -683,16 +739,35 @@ layer.iframeSrc = function(index, url){
//设定层的样式
layer.style = function(index, options){
var layero = $('#'+ doms[0] + index), type = layero.attr('type');
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
if(type === ready.type[1] || type === ready.type[2]){
var layero = $('#'+ doms[0] + index)
,contElem = layero.find('.layui-layer-content')
,type = layero.attr('type')
,titHeight = layero.find(doms[1]).outerHeight() || 0
,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
if(type === ready.type[3] || type === ready.type[4]){
return;
}
if(parseFloat(options.width) <= 260){
options.width = 260;
};
if(parseFloat(options.height) - titHeight - btnHeight <= 64){
options.height = 64 + titHeight + btnHeight;
};
layero.css(options);
if(type === ready.type[2]){
layero.find('iframe').css({
height: parseFloat(options.height) - titHeight - btnHeight
});
}
} else {
contElem.css({
height: parseFloat(options.height) - titHeight - btnHeight
- parseFloat(contElem.css('padding-top'))
- parseFloat(contElem.css('padding-bottom'))
})
}
};
@ -700,11 +775,33 @@ layer.style = function(index, options){
layer.min = function(index, options){
var layero = $('#'+ doms[0] + index);
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var left = layero.attr('minLeft') || (181*ready.minIndex)+'px';
ready.record(layero);
layer.style(index, {width: 180, height: titHeight, overflow: 'hidden'});
if(ready.minLeft[0]){
left = ready.minLeft[0];
ready.minLeft.shift();
}
layero.attr('position', layero.css('position'));
layer.style(index, {
width: 180
,height: titHeight
,left: left
,top: win.height() - titHeight
,position: 'fixed'
,overflow: 'hidden'
});
layero.find('.layui-layer-min').hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
if(!layero.attr('minLeft')){
ready.minIndex++;
}
layero.attr('minLeft', left);
};
//还原
@ -716,6 +813,7 @@ layer.restore = function(index){
height: parseFloat(area[1]),
top: parseFloat(area[2]),
left: parseFloat(area[3]),
position: layero.attr('position'),
overflow: 'visible'
});
layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
@ -752,13 +850,16 @@ layer.title = function(name, index){
//关闭layer总方法
layer.close = function(index){
var layero = $('#'+ doms[0] + index), type = layero.attr('type');
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
if(!layero[0]) return;
var remove = function(){
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.layui-layer-wrap');
for(var i = 0; i < 2; i++){
layero.find('.layui-layer-wrap').unwrap().hide();
wrap.unwrap();
}
wrap.css('display', wrap.data('display'));
} else {
//低版本IE 回收 iframe
if(type === ready.type[2]){
@ -772,12 +873,20 @@ layer.close = function(index){
layero[0].innerHTML = '';
layero.remove();
}
};
layero.addClass(closeAnim);
$('#layui-layer-moves, #layui-layer-shade' + index).remove();
layer.ie6 && ready.reselect();
ready.rescollbar(index);
$(document).off('keydown', ready.enter);
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
if(layero.attr('minLeft')){
ready.minIndex--;
ready.minLeft.push(layero.attr('minLeft'));
}
setTimeout(function(){
remove();
}, 200);
};
//关闭所有层
@ -802,19 +911,32 @@ var cache = layer.cache||{}, skin = function(type){
//仿系统prompt
layer.prompt = function(options, yes){
var style = '';
options = options || {};
if(typeof options === 'function') yes = options;
var prompt, content = options.formType == 2 ? '<textarea class="layui-layer-input">'+ (options.value||'') +'</textarea>' : function(){
if(options.area){
var area = options.area;
style = 'style="width: '+ area[0] +'; height: '+ area[1] + ';"';
delete options.area;
}
var prompt, content = options.formType == 2 ? '<textarea class="layui-layer-input"' + style +'>' + (options.value||'') +'</textarea>' : function(){
return '<input type="'+ (options.formType == 1 ? 'password' : 'text') +'" class="layui-layer-input" value="'+ (options.value||'') +'">';
}();
return layer.open($.extend({
btn: ['&#x786E;&#x5B9A;','&#x53D6;&#x6D88;'],
content: content,
skin: 'layui-layer-prompt' + skin('prompt'),
success: function(layero){
type: 1
,btn: ['&#x786E;&#x5B9A;','&#x53D6;&#x6D88;']
,content: content
,skin: 'layui-layer-prompt' + skin('prompt')
,maxWidth: win.width()
,success: function(layero){
prompt = layero.find('.layui-layer-input');
prompt.focus();
}, yes: function(index){
}
,resize: false
,yes: function(index){
var value = prompt.val();
if(value === ''){
prompt.focus();
@ -834,6 +956,7 @@ layer.tab = function(options){
return layer.open($.extend({
type: 1,
skin: 'layui-layer-tab' + skin('tab'),
resize: false,
title: function(){
var len = tab.length, ii = 1, str = '';
if(len > 0){
@ -1024,7 +1147,7 @@ layer.photos = function(options, loop, key){
moveType: 1,
scrollbar: false,
moveOut: true,
shift: Math.random()*5|0,
anim: Math.random()*5|0,
skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">'
+'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
@ -1056,8 +1179,8 @@ layer.photos = function(options, loop, key){
};
//主入口
ready.run = function(){
$ = jQuery;
ready.run = function(_$){
$ = _$;
win = $(window);
doms.html = $('html');
layer.open = function(deliver){
@ -1066,12 +1189,25 @@ ready.run = function(){
};
};
'function' === typeof define ? define(function(){
ready.run();
//加载方式
window.layui && layui.define ? (
layer.ready()
,layui.define('jquery', function(exports){ //layui加载
layer.path = layui.cache.dir;
ready.run(layui.jquery);
//暴露模块
window.layer = layer;
exports('layer', layer);
})
) : (
typeof define === 'function' ? define('jquery', function(){ //requirejs加载
ready.run(window.jQuery);
return layer;
}) : function(){
ready.run();
layer.use('skin/default/layer.css');
}();
}) : function(){ //普通script标签加载
ready.run(window.jQuery);
layer.ready();
}()
);
}(window);

110
src/skin/default/layer.css
View File

@ -5,8 +5,8 @@
**/
*html{background-image:url(about:blank); background-attachment:fixed;}
html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:1989px;}
*html{background-image: url(about:blank); background-attachment: fixed;}
html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
/* common */
.layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;}
@ -15,78 +15,28 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19
.layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
.layui-layer-close{position:absolute;}
.layui-layer-content{position:relative;}
.layui-layer-border{border:1px solid #B2B2B2; border:1px solid rgba(0,0,0,.3); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-moves{position:absolute; border:3px solid #666; border:3px solid rgba(0,0,0,.5); cursor:move; background-color:#fff; background-color:rgba(255,255,255,.3); filter:alpha(opacity=50);}
.layui-layer-load{background:url(loading-0.gif) #fff center center no-repeat;}
.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;}
.layui-layer-ico{ background:url(icon.png) no-repeat;}
.layui-layer-dialog .layui-layer-ico,
.layui-layer-setwin a,
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;}
.layui-layer-resize{position: absolute; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;}
/* 动画 */
.layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;}
@-webkit-keyframes bounceIn { /* 默认 */
0% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)}
}
.layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn}
@-webkit-keyframes bounceOut {
100% {
opacity: 0;
-webkit-transform: scale(.7);
transform: scale(.7)
}
30% {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceOut {
100% {
opacity: 0;
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7)
}
30% {
-webkit-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03)
}
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
@ -100,6 +50,18 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes bounceOut { /* 关闭动画 */
100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)}
30% {-webkit-transform: scale(1.05); transform: scale(1.05)}
0% {-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
/* 标题栏 */
.layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
.layui-layer-setwin{position:absolute; right:15px; *right:0; top:15px; font-size:0; line-height: initial;}
@ -116,11 +78,13 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19
.layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;}
/* 按钮栏 */
.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto;}
.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;}
.layui-layer-btn a{height: 28px; line-height: 28px; margin: 0 6px; padding: 0 15px; border:1px #dedede solid; background-color:#f1f1f1; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;}
.layui-layer-btn a:hover{opacity:0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity:0.7;}
.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity: 0.8;}
.layui-layer-btn .layui-layer-btn0{border-color: #4898d5; background-color: #2e8ded; color:#fff;}
.layui-layer-btn-l{text-align: left;}
.layui-layer-btn-c{text-align: center;}
/* 定制化 */
.layui-layer-dialog{min-width:260px;}
@ -134,27 +98,29 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19
.layui-layer-ico6{background-position:-180px 0;}
.layui-layer-rim{border:6px solid #8D8D8D; border:6px solid rgba(0,0,0,.3); border-radius:5px; box-shadow: none;}
.layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;}
.layui-layer-hui{min-width:100px; background-color:#000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
.layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
.layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;}
.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;}
.layui-layer-page .layui-layer-content{position:relative; overflow:auto;}
.layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;}
.layui-layer-nobg{background:none;}
.layui-layer-iframe .layui-layer-content{-webkit-overflow-scrolling: touch; overflow-y: auto;}
.layui-layer-iframe iframe{display:block; width:100%;}
.layui-layer-iframe,
.layui-layer-iframe .layui-layer-content{-webkit-overflow-scrolling: touch;}
.layui-layer-iframe .layui-layer-content{overflow-y: auto;}
.layui-layer-iframe iframe{display: block; width: 100%;}
.layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;}
.layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;}
.layui-layer-tips{background:none; box-shadow:none; border:none;}
.layui-layer-tips .layui-layer-content{position:relative; line-height:22px; min-width: 12px; padding:5px 10px; font-size:12px; _float:left; border-radius:3px; box-shadow: 1px 1px 3px rgba(0,0,0,.3); background-color:#FF9900; color:#fff;}
.layui-layer-tips{background: none; box-shadow:none; border:none;}
.layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 5px 10px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; color: #fff;}
.layui-layer-tips .layui-layer-close{right:-2px; top:-1px;}
.layui-layer-tips i.layui-layer-TipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color:#FF9900;}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;}
.layui-layer-tips i.layui-layer-TipsT{bottom:-8px;}
.layui-layer-tips i.layui-layer-TipsB{top:-8px;}
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color:#FF9900;}
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color: #000;}
.layui-layer-tips i.layui-layer-TipsR{left:-8px;}
.layui-layer-tips i.layui-layer-TipsL{right:-8px;}
@ -181,6 +147,8 @@ html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:19
/* prompt模式 */
.layui-layer-prompt .layui-layer-input{display:block; width:220px; height:30px; margin:0 auto; line-height:30px; padding: 0 5px; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color:#333;}
.layui-layer-prompt textarea.layui-layer-input{width:300px; height:100px; line-height:20px;}
.layui-layer-prompt .layui-layer-content{padding: 20px;}
.layui-layer-prompt .layui-layer-btn{padding-top: 0;}
/* tab模式 */
.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);}