layer发布 3.x 更新日志,业界最多人使用的Web弹层组件

动态 未结 精帖
108 26377
贤心
贤心 2016-11-7
悬赏:5飞吻
官网 http://layer.layui.com/
# v3.1.0 2017.09.13
* 紧急修复在最新版 Chrome(61.0.3163.79)下遮罩层出现的奇异花屏现象(覆盖升级后,记得清楚浏览器缓存)
* 去除 type:2 时如果 content 未填写而弹出 layer 官网的默认设置
* 修复 layer.js 未设置 btnAlign 时,包裹按钮的 div.layui-layer-btn 出现一多余 class
* 增加 maxHeight 参数,用于设定弹层的最大高度
* 对默认按钮颜色、Tips 层、Prompt 层、Tab 层等进行了样式微调,以便更显大气,且更符合 layui 风格
# v3.0.3 2017.03.06
* 增加参数 isOutAnim,用于控制是否显示关闭动画,true 或者 false
* 撤销自动ready处理机制,因为在初始时与Ajax同步等使用场景存在耦合等问题
* 修复Firefox下对默认层设置了高度,按钮被溢出的bug
* photos层的出场动画不再是随机,而是采用默认动画(也可以通过参数 anim 来自定义)
* 去除photos层的默认关闭动画(觉得觉得不闪眼的话,也可以通过参数isOutAnim开启)
# v3.0.2 2017.02.25
* 新增 resizing 回调,用于监听窗口的调整大小
* 增加自动ready处理机制,即如果你页面一打开就执行弹层,无需放入layer.ready中
* 对moveEnd回调返回一个参数为当前容器的DOM对象
* 添加一个amd条件,避免 define出错(Merge pull request #42 from wangyateng/master)
* 修复tab,photos,prompt弹层默认success回调被覆盖导致功能不正常的问题(来自github用户 waychan23 的友情提醒)
* 完善多按钮场景换行的间距(之前是紧贴在一起,略不雅观)
* 弹出图片层的动画时间改为800ms
* 修复按方向键切换图片层过快时重复弹出的bug
* 修复与animate.css可能存在的动画冲突
在决定这个大版本更新之前,很多人建议我应该把时间放在刚刚发布的Layui上,因为layer已经比较成熟了,没必要再更新。但是,坚持layer是一种情怀,为了对得起“国内最多人使用的弹层组件”,我仍然义无反顾地追寻一个尽可能更完备的她。于是我把这种期许赋予在了layer 3.0上,我希望它会是一个更成熟的方案,在它所服务的领域,竭力做到极致。

# 【v3.0】 2016.11.07 - 该版本对2.x版本无缝兼容,可直接覆盖升级。
* 新增拖动弹层右下角可调节弹层尺寸的功能,由参数resize控制,默认开启。对loading、tips层无效
* offset参数新增 t、r、b、l、lt、lb、rt、rb、的赋值,可快捷实现上、右、下、左、左上角、左下角、右上角、右下角的边缘定位
* 新增btnAlign参数,支持三个参数:l/c/r,分别用于控制按钮居左、居中、居右的快捷设置(默认r,即居右)
* 点击最小化时,自动定位到页面左下角,在出现多个最小化时,会依次排列,这是一次较为重大的完善。
* 新增关闭层的过度动画(可通过anim: -1统一取消动画)

* 重写拖拽核心代码,性能大幅度提升
* 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大面积改善
* 降解IE6的fixed支持,不过仍然对ie6兼容(话说现在全浏览器兼容的组件已经不多了,layer后续会整理出不兼容ie6/7的版本)

* 修改图片超出屏幕后,重新计算大小的算法(Merge pull request from 390029659/master)
* 修复iframe层在用于iPhone设备时,无法触发滚动的Bug
往期更新:
layer 发布 2.4,兼容jQuery 3.0
回帖
  • 大王
    2016-11-7
    支持[赞]
    0 回复
  • 啪啪啪[鼓掌]
    0 回复
  • 默默的关注
    0 回复
  • woo
    2016-11-7
    @唉呀怎么这么帅 可以的,我已经升级了。。。
    0 回复
  • leeze
    2016-11-7
    [good]
    0 回复
  • 前排支持。。。。。。。。。。。。。
    0 回复
  • 小Z
    2016-11-7
    [赞] [赞] [赞]
    0 回复
  • 小胖鑫
    2016-11-7
    阿西吧,你们占楼也太快了
    0 回复
  • sdh163
    2016-11-7
    最喜欢这一句:3.0对2.x版本无缝兼容,可直接覆盖升级。
    0 回复
  • Jack_s
    2016-11-7
    [哈哈] [赞]
    0 回复
  • 韦启蒙
    2016-11-7
    我使用有问题,Uncaught TypeError: Cannot read property 'extend' of undefined
    0 回复
  • 刚刚下载下来layer发现使用require加载不能正常使用,然后看了下源码发现在1206行define('jquery', function()。。。
    是不是应该是个数组
    还有就是使用require加载就不会加载样式
    0 回复
  • 韦启蒙
    2016-11-7
    @星宿老仙 我也是requirejs,但是报错Uncaught TypeError: Cannot read property 'extend' of undefined
    0 回复
  • [good]
    0 回复
  • 贤心
    贤心 (管理员)
    2016-11-7
    @韦启蒙 @星宿老仙 额,重新下载layer,没注意requirejs加载的那个报错。
    另外, requirejs加载不会主动加载样式,需要借助layer.config来配置一下path,见文档: http://www.layui.com/doc/modules/layer.html#layer.config
    0 回复
  • nice 我直接更新了
    0 回复
  • 贤心
    贤心 (管理员)
    2016-11-7
    @韦启蒙 你那个报错是哪里报的错,点击错误,看看是js哪里报的
    0 回复
  • L454
    2016-11-7
    [good][good][good]
    0 回复
  • for(;;)console.log("赞")
    0 回复
  • 韦启蒙
    2016-11-7
    @贤心 可以了,把原来的path改成extend就行了
    layer.js是在/js/layer.js
    layer.css是在/js/skin/layer.css

    layer.config({
    extend: '/layer.css'
    });
    0 回复
  • 韦启蒙
    2016-11-7
    @贤心 另外还有一个问题,就是如果弹出窗口的时候屏蔽滚动条,因为滚动条消失了,整个页面会向右移动一个滚动条的位置,大约是17px吧,这是个小细节,稍微会影响用户体验的,能改的话就最好了,我看其他网站的插件是在body上面加了一个padding-right:17px,关掉弹窗的时候再去掉,我尝试改了一下源码的304行:
    config.scrollbar || doms.html.css('overflow':'hidden','padding-right':'17px').attr('layer-full', times);
    我这样改会报错
    0 回复
  • 下班前 前来祝贺![ok]
    0 回复
  • Hanako桑
    2016-11-7
    继续加油↖(^ω^)↗哇咔咔
    0 回复
  • 小马
    2016-11-7
    [赞] 可以!
    0 回复
  • 支持[赞]
    0 回复
  • 厉害word姐
    0 回复
  • 已经升级使用!!!!十分感谢
    0 回复
  • 额额
    2016-11-8
    下载的3.0版本中demo.html打开后弹层title乱码,看了下是因为没有设置页面编码导致的:
    layer.ready(function(){
    //官网欢迎页
    layer.open({
    type: 2,
    title: 'layer弹层组件官网',
    fix: false,
    maxmin: true,
    shadeClose: true,
    area: ['1100px', '600px'],
    content: 'http://sentsin.com/jquery/layer/?form=local',
    end: function(){
    layer.tips('Hi', '#about', {tips: 1})
    }
    });
    });
    就是这个title:"layer弹层组件官网" 乱码
    0 回复
  • 贤心
    贤心 (管理员)
    2016-11-8
    @额额 已解决,重新下载。
    0 回复
  • [嘻嘻] [可爱]
    0 回复