mirror of https://github.com/layui/layer
meihangbo
GitHub
commit
c66ad46cfa
20
CHANGELOG.md
20
CHANGELOG.md
|
|
@ -1,4 +1,24 @@
|
|||
|
||||
# v3.1.0 未正式发布
|
||||
|
||||
* 去除type:2时如果content未填写而弹出layer官网的默认设置
|
||||
* 修复layer.js 未设置btnAlign时,包裹按钮的div.layui-layer-btn 出现一多余class（Merge pull request from meihangbo/patch-2）
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
# v3.0.3 2017.03.06
|
||||
|
||||
* 增加参数 isOutAnim，用于控制是否显示关闭动画，true 或者 false
|
||||
* 撤销自动ready处理机制，因为在初始时与Ajax同步等使用场景存在耦合等问题
|
||||
* 修复Firefox下对默认层设置了高度，按钮被溢出的bug
|
||||
* photos层的出场动画不再是随机，而是采用默认动画（也可以通过参数 anim 来自定义）
|
||||
* 去除photos层的默认关闭动画（觉得觉得不闪眼的话，也可以通过参数isOutAnim开启）
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
# v3.0.2 2017.02.25
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
|
||||
## 概要
|
||||
layer是一款近年来口碑非常不错的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
|
||||
|
||||
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
|
||||
layer是一款近年来备受青睐的web弹层组件，这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
|
||||
|
||||
[文档与演示](http://layer.layui.com/)
|
||||
|
||||
|
|
@ -10,8 +8,8 @@ layer是一款近年来口碑非常不错的web弹层组件，她具备全方位
|
|||
layer致力于打造国内最盛行的弹层组件，为web开发提供强劲动力。
|
||||
|
||||
## 现状
|
||||
因着数年的坚持维护，截至到2016年11月07日，已运用在超过20万家Web平台，其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案，并且她仍在与Layui一并高速发展。
|
||||
因着数年的坚持维护，截至到2017年03月21日，已运用在超过30万家Web平台，其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案，并且她仍在与Layui一并高速发展。
|
||||
|
||||
|
||||
## 相关
|
||||
[官网](http://layer.layui.com/)、[社区交流](http://fly.layui.com)
|
||||
[官网](http://layer.layui.com/)、[社区](http://fly.layui.com)
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"main": "src/layer.js",
|
||||
"version": "3.0.2",
|
||||
"version": "3.0.3",
|
||||
"homepage": "https://github.com/sentsin/layer",
|
||||
"authors": [
|
||||
"sentsin <xu@sentsin.com>"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"version": "3.0.2",
|
||||
"version": "3.0.3",
|
||||
"mobile": "2.0.0",
|
||||
"description": "Web弹层组件",
|
||||
"main": "src/layer.js",
|
||||
|
|
|
|||
45
src/layer.js
45
src/layer.js
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
|
||||
@Name：layer v3.0.2 Web弹层组件
|
||||
@Name：layer v3.0.3 Web弹层组件
|
||||
@Author：贤心
|
||||
@Site：http://layer.layui.com
|
||||
@License：MIT
|
||||
|
|
@ -26,7 +26,7 @@ var isLayui = window.layui && layui.define, $, win, ready = {
|
|||
|
||||
//默认内置方法。
|
||||
var layer = {
|
||||
v: '3.0.2',
|
||||
v: '3.0.3',
|
||||
ie: function(){ //ie版本
|
||||
var agent = navigator.userAgent.toLowerCase();
|
||||
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
||||
|
|
@ -83,7 +83,7 @@ var layer = {
|
|||
},
|
||||
|
||||
ready: function(callback){
|
||||
var cssname = 'skinlayercss', ver = '302';
|
||||
var cssname = 'skinlayercss', ver = '303';
|
||||
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;
|
||||
|
|
@ -167,11 +167,9 @@ var Class = function(setings){
|
|||
var that = this;
|
||||
that.index = ++layer.index;
|
||||
that.config = $.extend({}, that.config, ready.config, setings);
|
||||
layer.ready(function(){
|
||||
document.body ? that.creat() : setTimeout(function(){
|
||||
that.creat();
|
||||
}, 50);
|
||||
});
|
||||
document.body ? that.creat() : setTimeout(function(){
|
||||
that.creat();
|
||||
}, 30);
|
||||
};
|
||||
|
||||
Class.pt = Class.prototype;
|
||||
|
|
@ -194,6 +192,7 @@ Class.pt.config = {
|
|||
zIndex: 19891014,
|
||||
maxWidth: 360,
|
||||
anim: 0,
|
||||
isOutAnim: true,
|
||||
icon: -1,
|
||||
moveType: 1,
|
||||
resize: true,
|
||||
|
|
@ -233,7 +232,7 @@ 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="'+ doms[6] + (config.btnAlign ? (' layui-layer-btn-' + config.btnAlign) : '') +'">'+ button +'</div>'
|
||||
}() : '')
|
||||
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
|
||||
+ '</div>'
|
||||
|
|
@ -271,7 +270,7 @@ Class.pt.creat = function(){
|
|||
layer.closeAll('dialog');
|
||||
break;
|
||||
case 2:
|
||||
var content = config.content = conType ? config.content : [config.content||'http://layer.layui.com', 'auto'];
|
||||
var content = config.content = conType ? config.content : [config.content, 'auto'];
|
||||
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:
|
||||
|
|
@ -327,8 +326,13 @@ Class.pt.creat = function(){
|
|||
|
||||
//为兼容jQuery3.0的css动画影响元素尺寸计算
|
||||
if(doms.anim[config.anim]){
|
||||
that.layero.addClass(doms.anim[config.anim]).data('anim', true);
|
||||
that.layero.addClass(doms.anim[config.anim]);
|
||||
};
|
||||
|
||||
//记录关闭动画
|
||||
if(config.isOutAnim){
|
||||
that.layero.data('isOutAnim', true);
|
||||
}
|
||||
};
|
||||
|
||||
//自适应
|
||||
|
|
@ -346,7 +350,7 @@ Class.pt.auto = function(index){
|
|||
var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
|
||||
function setHeight(elem){
|
||||
elem = layero.find(elem);
|
||||
elem.height(area[1] - titHeight - btnHeight - 2*(parseFloat(elem.css('padding'))|0));
|
||||
elem.height(area[1] - titHeight - btnHeight - 2*(parseFloat(elem.css('padding-top'))|0));
|
||||
}
|
||||
switch(config.type){
|
||||
case 2:
|
||||
|
|
@ -892,7 +896,7 @@ layer.close = function(index){
|
|||
delete ready.end[index];
|
||||
};
|
||||
|
||||
if(layero.data('anim')){
|
||||
if(layero.data('isOutAnim')){
|
||||
layero.addClass(closeAnim);
|
||||
}
|
||||
|
||||
|
|
@ -903,9 +907,14 @@ layer.close = function(index){
|
|||
ready.minIndex--;
|
||||
ready.minLeft.push(layero.attr('minLeft'));
|
||||
}
|
||||
setTimeout(function(){
|
||||
remove();
|
||||
}, ((layer.ie && layer.ie < 10) || !layero.data('anim')) ? 0 : 200);
|
||||
|
||||
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
|
||||
remove()
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
remove();
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
//关闭所有层
|
||||
|
|
@ -1113,6 +1122,7 @@ layer.photos = function(options, loop, key){
|
|||
if(data.length <= 1) return;
|
||||
photos.start = dict.imgIndex - 1;
|
||||
layer.close(dict.index);
|
||||
return layer.photos(options, true, key);
|
||||
setTimeout(function(){
|
||||
layer.photos(options, true, key);
|
||||
}, 200);
|
||||
|
|
@ -1192,7 +1202,8 @@ layer.photos = function(options, loop, key){
|
|||
moveType: 1,
|
||||
scrollbar: false,
|
||||
moveOut: true,
|
||||
anim: Math.random()*5|0,
|
||||
//anim: Math.random()*5|0,
|
||||
isOutAnim: false,
|
||||
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 +'">'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>layer-更懂你的web弹窗解决方案</title>
|
||||
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
|
||||
<script src="../build/layer.js"></script>
|
||||
|
||||
<style>
|
||||
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
|
||||
|
|
@ -20,6 +19,9 @@
|
|||
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
|
||||
.photos-demo img{width:200px;}
|
||||
</style>
|
||||
|
||||
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
|
||||
<script src="../build/layer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
|
|
@ -34,8 +36,8 @@
|
|||
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
|
||||
三、jquery需1.8+
|
||||
四、更多使用说明与演示，请参见layer官网。
|
||||
五、使用时请务必保留来源，请勿用于违反我国法律的web平台。
|
||||
六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
|
||||
五、使用时请务必保留来源，请勿用于违反我国法律法规的web平台。
|
||||
六、layer遵循MIT开源协议，将永久性提供无偿服务。
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
|
@ -52,15 +54,12 @@
|
|||
|
||||
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
|
||||
layer.ready(function(){
|
||||
//官网欢迎页
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: 'layer弹层组件官网',
|
||||
fix: false,
|
||||
title: '欢迎页',
|
||||
maxmin: true,
|
||||
shadeClose: true,
|
||||
area: ['1100px', '600px'],
|
||||
content: 'http://sentsin.com/jquery/layer/?form=local',
|
||||
area: ['800px', '500px'],
|
||||
content: 'http://layer.layui.com/test/welcome.html',
|
||||
end: function(){
|
||||
layer.tips('Hi', '#about', {tips: 1})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue