layer 1.9 发布,国产 Web 弹层不懈的追求者

layer历经三年考验,已经清楚地懂得了人们最需要的是什么,因此这一版的核心是做减法,不仅剔除了部分冗余的API,对包括layer.ext.js在内的代码也进行了大量瘦身(所以请不要覆盖升级),layer.js相比1.8.5减少了将近300行代码,但是这并不意味着功能的削减,事实上,layer已经变得更强大!1.9致力于告诉人们,选择layer是完全正确的,因为似乎没有哪个类似组件会在这个领域如此玩命地维护和改进。应当有理由相信,layer1.9是一个里程碑式的跨进!

【调用】

layer.open(options)

【可选配置】

layer.config({
    extend: ‘extend/layer.ext.js‘, //注意,目录是相对layer.js根目录。如果加载多个,则 [a.js, b.js, …]
    shift: 1, //设定默认出场动画
    skin: ‘layui-layer-molv‘ //设定设定默认皮肤
    …
});

//除此之外,extend还允许你加载css。这对于layer的第三方皮肤有极大的帮助,如:
layer.config({
    extend: [
        ‘extend/layer.ext.js‘, //加载扩展模块
        ‘skin/layer-ext-myskin/style.css‘ //layer-ext-myskin即是你拓展的皮肤文件
    ]
});

//扩展css的规范:您必须在你扩展中的css文件加上这段
html #layui_layer_skinlayer-ext-myskinstylecss{display:none; position: absolute; width:1989px;}
规则就是:html #layui_layer_skin{文件夹名}{文件名}css
skin名以文件夹名为标准。

  从这一版开始,全面完善了内部加载器,对于功能和css的扩展都做了非常强健的支撑,这意味着你真正意义上可以随便玩弄layer了。

【更新日志】

> 新增laye.open(options),抛弃了之前的$.layer(options)调用方法,目的是与layer mobile保持统一。
> 新增layer.config(options)方法,用于进行全局化配置。除了用于展现弹层的基础参数外,还支持path,用于模块化加载layer时设定目录以便加载所需配件,如layer.config({path: ‘所在路径‘, extend: ‘‘});
> 新增content参数,用于统一传入内容。支持string类型和jquery dom对象。如果是type:2,即iframe的url。
> 新增icon参数,用于统一配置对话框和loading的icon类型。
> 新增cancel参数,用于统一取消回调。
> 新增skin参数,用于控制层的不同外观。
> 新增layer.ready(path, callback),用于页面加载时即调用弹层。如果通过layer.config配置了path,此方法的path可以不填,即直接layer.ready(callback);
> 新增tipsMore,用于开启多个tips
> 新增scrollbar,用于设定是否屏蔽浏览器滚动条
> 完善offset参数,除了跟之前一样,[Y坐标, X坐标],还支持传入‘rd‘,表示右下角。另外还支持只传入Y坐标,如offset: ‘120px‘。默认‘auto‘,即垂直水平居中。
> 完善自适应,只要设定了固定高度,任何层都会自适应出现滚动条
> 完善shift,全新的CSS3动画模式,支持传入0-6。
> 完善area,支持传入宽度、[宽,高],默认‘auto‘,表示自适应
> 完善time,传入值改为毫秒,比如2秒关闭,time: 2000
> 完善use方法,修复之前初始调用时部分浏览器一些不稳定因素
> 完善layer.full/layer.min方法,只要传入index即可,不用跟之前一样还要传入area和offset。。。
> layer.alert/confirm/msg/load/tips五种快捷引用重写,更灵活,更易使用。

> 剔除border参数,因为它没有本质的作用,自定义层样式可以通过新增的skin参数
> 剔除dialog的msg,page的html/url/dom,统一采用content
> 剔除dialog和loading的type,统一采用icon
> 剔除dialog中用于配置按钮数的btns,因为可直接通过btn本身来获取。
> 剔除no和close回调,统一采用cancel取代,不过仍然对前两者兼容。
> 剔除layer.closeLoad()、layer.closeTips()方法,统一用layer.closeAll(‘loading/tips‘)来对指定类型层进行关闭
> 剔除bgcolor参数,因为自定义的样式一律采用skin参数控制
> 剔除tips一些列子元素,只保留自身,并且支持number和object形,用于设定方向和显示箭头。
> 剔除layer.getIndex方法,获取索引统一用返回值
> 剔除layer.autoArea方法,因为已经采取更好的自适应方案。

> 默认不显示dialog图标,需要显示配置dialog指定的type即可
> 很多不可见只可感受的细节改动

<< 拓展模块 >>
> layer.prompt/layer.tab/layer.photos重写,代码更强健,功能更强大

更详细的文档:http://sentsin.com/jquery/layer/

时间: 2024-10-11 22:53:37

layer 1.9 发布,国产 Web 弹层不懈的追求者的相关文章

layer 1.9.2 发布,国产 Web 弹层不懈的前行者

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

layer是一款近年来备受青睐的web弹层组件

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升.易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被2370889人次关注).layer兼容了包括IE6在内的所有主流浏览器. 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎.当然,这种“王

layer弹层之美

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 官网:http://layer.layui.com/ //初体验 layer.alert('内容') //询问框 layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.m

jQuery Layer 弹层组件

layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升.易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer.layer兼容了包括IE6在内的所有主流浏览器. 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎.当然,这种"王婆卖瓜"的陈

Layer 一个让你想到即可做到的web弹窗/层 解决方案

最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方演示与讲解:http://sentsin.com/jquery/layer/

jquery layer弹窗弹层插件 小巧强大

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

layer ----- 弹层

模块加载名称:layer,layer独立组件官网:layer.layui.com layer可以独立使用,也可以通过Layui模块化使用.按照实际需求来选择.只使用layer,你可以去layer独立组件官网下载组件包.你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js.如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js ,解压后可放在extend下, , layer提供

jquery layer弹窗弹层插件 (转)

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

弹层组件-layer

layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上任意版本,和laye.js 通过简单的例子能加深理解和学习,首先引入基本的css和js <link rel="stylesheet" href="css/reset.css"> <script src="http://libs.baidu.c