前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

IT痕迹 2017-10-01 16:43

layer是一个开源免费的弹出层组件,简单易用、美观,功能强大能够满足你对弹出层的几乎所有需求,每一种模式都有自己的特色,调用简单实用性强,可轻松实现Alert、Confirm、Prompt、普通提示、页面区块、iframe、tips等几乎所有的弹出模式。此组件知名度高,在此仅介绍给不知道的新人,谢谢支持。

1、下载及初始化

//layer.layui.com/

layer是一个独立的组件,能够在不引入layui的情况下单独引入layer,下载文件后放到项目任意位置,在页面输入如下代码引入jQuery和layerjs即可。需要注意的是jQuery必须引入1.8及以上版本。

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

在页面body中添加一个按钮,为按钮添加id属性<button id="test1">运行</button>,运行如下代码脚本,点击按钮即可。

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

2、不同模式弹层的演示

layer调用不同内置方法即可弹出不同模式的弹层,内置多个配置属性,可以配置标题、内容、皮肤、宽高、弹出位置、按钮(包括关闭按钮、自定义按钮、排序等)、自动关闭时间、遮盖、动画、是否允许拉伸等;多种状态监听事件;通过不同功能组合,就能够实现你想要的需求。下面简单展示一下不同模式的弹层。

①基础层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

②询问层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

③页面层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

④Tips层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑤加载层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑥prompt层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑦tab层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑧相册层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑨边缘弹出

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

⑩iframe层

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)

API文档:

//www.layui.com/doc/modules/layer.html


layer弹层小巧简单,但功能确一点也不简单,使用方便、美观,layer兼容所有现代浏览器及IE6+,能够轻松应对各种使用场景,这个组件强烈推举给大家。写这篇文章只为让更多人知道layer,写得不好的地方,请各位大神轻喷,再次感谢。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值