博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)
阅读量:4293 次
发布时间:2019-05-27

本文共 764 字,大约阅读时间需要 2 分钟。

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,写得不好的地方,请各位大神轻喷,再次感谢。

转载地址:http://pfzws.baihongyu.com/

你可能感兴趣的文章
安卓三状态切换按钮TriStateToggleButton
查看>>
Spring框架-AOP细节
查看>>
java.lang.Instrument 代理Agent使用
查看>>
Javascript:指针、帽子和女朋友
查看>>
Android中的ALERTDIALOG使用_优就业
查看>>
java使用javacsv读取csv文件 导入Mysql数据库
查看>>
Apache2.4 + Tomcat7负载均衡和集群(一)
查看>>
基于角色和资源的用户权限控制(用SpringMVC实现)
查看>>
前端代码入门——选择器与优先级 优就业
查看>>
javascript面试的5个冷门知识点
查看>>
Lucene初探
查看>>
Git简介、安装及创建版本库
查看>>
如何在JavaScript中编写一个简单的Bug跟踪器
查看>>
jQuery 效果 - 滑动
查看>>
对Java多态的深入理解
查看>>
javascript重点-表达式和运算符_优就业
查看>>
springmvc整合poi导出报表
查看>>
Oracle Data Guard延迟的原因
查看>>
java8 遍历数组的几种方式
查看>>
java基础知识(七)--Object类
查看>>