layer弹框在实际项目中的一些应用
官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。
同时也高居年度最受欢迎的开源项目榜单:2017年度最流行的十大中国开源软件:https://www.jianshu.com/p/d7a76eee56e6
受到如此追捧也是有原因的,使用起来快速方便容易上手,界面美观大方不累赘,看上去很舒服,在项目中用到一部分,也记录下一些常用的功能和属性
项目中常见的一些弹框层,快速使用这个文档,layui 官方总文档:http://layer.layui.com/ 此文档已经不在维护http://layer.layui.com/api.html 新版弹框文档:http://www.layui.com/doc/modules/layer.html 讨论社区:http://fly.layui.com/
以下代码在线调试网址:http://www.layui.com/doc/modules/layer.html
一:弹出到另外一个页面的写法,及其关闭,添加保存之后关闭页面的写法
运用:点击添加按钮,弹出另外一个页面
图片.png
$("#adduser").on("click", function() {
layer.open({
type : 2,
title : '添加标签',
area : [ '800px', '470px' ],
fix : false, // �
content :'useradd.jsp',
end : function() {
}
});
});
页面点击关闭按钮和添加后保存按钮逻辑代码:
//添加后保存
var index = parent.layer.getFrameIndex(window.name);
$("#addBtn").on("click", function() {
$.ajax({
url : "xxxxxxxxxx",
data : {
loginName : $("#loginName").val(),
username : $("#username").val(),
password : $("#password").val(),
rePassword:$("#rePassword").val(),
xxxxx : $("#xxxxxxxxxxx option:selected").val(),
},
type : "post",
success : function(data) {
}
});
})
$('#close').on('click', function() {
parent.layer.close(index);
})
二:自定义位置 offset: ['90px', '900px']
类型:String/Array,默认:'auto' 默认垂直水平居中。当你只想定义top时,你可以offset: '100px'。当您top、left都要定义时,你可以offset: ['100px', '200px']。除此之外,你还可以定义offset: 'rb',表示右下角。其它的特殊坐标,你可以自己计算赋值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layer弹框属性</title>
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="layer.js"></script>
<script>
layer.msg('请稍后', {
icon: 14,
//shade: 0.01,
offset: ['90px', '900px']
});
</script>
</html>
三:自定义弹框大小(宽度和高度)
var index= layer.msg('尼玛,打个酱油', {icon: 4});
layer.style(index, {
width: '200px',
height:'200px'
});
四:设置layer.msg弹窗时间
msg弹框自带消失属性,有的用于注册成功之后的提示框几秒后消失,当然如果需要手动设置弹框时间,代码如下:弹出提示信息,4秒后自动消失
<script>
layer.msg('提示信息',
{time:4000}
);
//1000就是1秒;依次类推;
</script>
五:弹框图标 一览表
图片.png
<script>
layer.msg('图标显示', {
icon: 14,
//shade: 0.01,
});
</script>
六:常见例子:加载层和loading层以及更多弹出实例:
图片.png
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
//loading层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
更多弹出实例:http://layer.layui.com/test/more.html
图片.png
图片.png
- hbase源码系列(十三)缓存机制MemStore与Block Cache
- hbase源码系列(十四)Compact和Split
- 设计模式学习(四): 1.简单工厂 (附C#实现)
- 从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD
- 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
- RavenDb学习(十)附件,存储大对象
- 从头编写 asp.net core 2.0 web api 基础框架 (3)
- Distribute Cached 使用
- RavenDb学习(七) 异步工作以及维度查询
- RavenDb学习(五)结果转换
- sqoop 从sqlserver2008 导入数据到hadoop
- 从头编写 asp.net core 2.0 web api 基础框架 (2)
- hbase源码系列(四)数据模型-表定义和列族定义的具体含义
- RavenDb学习(四)处理文档相关性
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swagger3.0官方starter诞生,可以扔掉那些野生starter了
- Prometheus 入门教程(一):Prometheus 快速入门
- 开发|ShiroConfig实现基础拦截
- 推荐几个 VS Code 扩展、主题和字体
- 万字长文 | 这可能是东半球最保姆级的后台服务器开发学习路线
- Python|对多角星的绘制
- Pythyon|当中秋遇上国庆
- 清华老哥要是会 screen,是不是就不用拖着电脑骑车了
- Python|用turtle画笔制作奥运五环
- 2 行代码,将 .NET 执行时间降低 87%!(附代码)
- Web渗透测试|SQL报错注入
- Python|运算符的运用
- Windows下登录凭证窃取技巧
- 小浩发现这篇浮点数的文章讲的真不错!
- 安全攻击溯源思路及案例