layer简单使用
官方：https://www.layui.com/doc/modules/layer.html
源码：https://github.com/xiaostudy/web_sample
效果
目录结构
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/layer/layer.js"></script> <script type="text/javascript">
function msg1() {
layer.msg("msg弹窗,默认停留3秒");
} function msg2() {
layer.msg("msg弹窗,停留2秒", {time: 2000});
} function msg3() {
layer.msg("msg弹窗,不关闭", {time: -1});
} function msg4() {
layer.msg("msg弹窗,图标", {icon: 6, time: 2000});//1打钩,2打叉,3问号,4锁定,5难过脸,6微笑脸,7-15感叹号,16加载,17以上估计全是感叹号
} function msg5() {
layer.msg("msg弹窗,起始位置", {offset:['50px', '50px'],time: 2000});//x纵向,y横向
} function msg6() {
layer.msg("msg弹窗, 更改背景,背景不可点击", {time: 2000, shade : [0.5 , '#000' , true]});
} function msg7() {
layer.msg("msg弹窗, 回调函数", {time: 2000,},function(){
reload();
});
} function reload() {//回调函数
layer.msg("回调函数执行！");
} function load1() {
var index = layer.load();
layer.close(index);//不加关闭一直处于加载状态
} function load2() {
var index = layer.load(1);
layer.close(index);//不加关闭一直处于加载状态
} function load3() {
layer.load(2,{time: 2*1000});
} function tips1() {
layer.tips('只想提示地精准些', '#tips1');
} function tips2() {
layer.tips('在上面', '#tips2', {
tips: 1//1在上面，2在右边，3在下面，4在左边
});
} function open1(){
var index = layer.open({
// time: 2*1000,//2秒后不点击关闭也自动关闭
type: 1,//0：信息框，默认 1：页面层 2：iframe层 3：加载层 4：tips层
area: ['600px', '360px'],//固定长宽
shadeClose: false, //点击遮罩关闭
content: '\<\div style="padding:20px;">open弹窗\<\/div>'
// content: 'open弹窗'
});
// layer.close(index);//不加关闭一直处于等待点击关闭
} function open2(){
layer.open({
title:'test',
type: 1,
area: ['600px', '360px'],//固定长宽
/*https://www.layui.com/doc/modules/layer.html#btn*/
btn:['确定', '取消'],//第一个按钮是yes，第二个按钮是btn2，以此类推
style:'color:#666;',
content: '\<\div style="padding:20px;">跳转到layer.msg\<\/div>',
yes: function(index, layero){//第一个按钮
location.href='https://www.layui.com/doc/modules/layer.html#layer.msg';
},
btn2: function (index, layero) {//第二个按钮
layer.msg("点击取消关闭");
// return false; //开启该代码可禁止点击该按钮关闭
},
cancel: function(){//右上角关闭回调
layer.msg("点击右上角关闭");
// return false;//开启该代码可禁止点击该按钮关闭
}
});
}
</script>
</head>
<body style="text-align: center">
<h1>layer演示</h1>
<div>
<div>
<h2>提示框msg</h2>
<a href="https://www.layui.com/doc/modules/layer.html#layer.msg">msg的官方讲解</a>
<br><br>
<div>
<input type="button" value="msg弹窗,默认停留3秒" onclick="msg1()" />
</div>
<div>
<input type="button" value="msg弹窗,停留2秒" onclick="msg2()" />
</div>
<div>
<input type="button" value="msg弹窗,不关闭" onclick="msg3()" />
</div>
<div>
<input type="button" value="msg弹窗,图标" onclick="msg4()" />
</div>
<div>
<input type="button" value="msg弹窗,起始位置" onclick="msg5()" />
</div>
<div>
<input type="button" value="msg弹窗,更改背景后,背景不可点击" onclick="msg6()" />
</div>
<div>
<input type="button" value="msg弹窗,回调函数" onclick="msg7()" />
</div>
</div>
<hr>
<div>
<h2>加载层load</h2>
<a href="https://www.layui.com/doc/modules/layer.html#layer.load">load的官方讲解</a>
<br><br>
<div>
<input type="button" value="load弹窗,默认" onclick="load1()" />
</div>
<div>
<input type="button" value="load弹窗,1" onclick="load2()" />
</div>
<div>
<input type="button" value="load弹窗,指定等待2秒" onclick="load3()" />
</div>
</div>
<hr>
<div>
<h2>tips</h2>
<a href="https://www.layui.com/doc/modules/layer.html#layer.tips">tips的官方讲解</a>
<br><br>
<div>
<input type="button" value="tips弹窗,在下面测试旁边" onclick="tips1()" />
</div>
<span id="tips1">
测试
</span>
<div>
<input type="button" value="tips弹窗,在上面" onclick="tips2()" />
</div>
<span id="tips2">
测试
</span>
</div>
<hr>
<div>
<h2>open</h2>
<a href="https://www.layui.com/doc/modules/layer.html#layer.open">open的官方讲解</a>
<br><br>
<div>
<input type="button" value="open弹窗" onclick="open1()" />
</div>
<div>
<input type="button" value="open弹窗,2" onclick="open2()" />
</div>
</div>
</div> </body>
</html>
layer简单使用的更多相关文章
- iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍
UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...
- UIKit中的几个核心对象的介绍:UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍
UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...
- IOS Animation-贝塞尔曲线与Layer简单篇（一）
IOS Animation-贝塞尔曲线与Layer简单篇 swift篇 1.介绍 贝塞尔曲线: 贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一.它通过控制曲线上的四个点( ...
- thinkphp 百度编辑器和layer简单用法
百度编辑器1.4.3.3和layer插件简单案例 :后台单页面管理 增删改查操作 此处为默认图片保存路径,如果要修改保存路径,需要修改config文件. 添加页. <extend name=&q ...
- 基于layer简单的弹层封装
/** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...
- UIApplication,UIWindow,UIViewController,UIView(layer)
转载自:http://www.cnblogs.com/iCocos/p/4684749.html UIApplication,UIWindow,UIViewController,UIView(laye ...
- 烂泥：Postfix邮件服务器搭建之软件安装与配置
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb Postfix邮件服务器的搭建需要使用到几个软件,分别是cyrus-sasl.postf ...
- 踏着前人的脚印学hadoop——ipc中的Client
1.Client有五个内部类,分别是Call,ParallelCall,ParallelResult,Connetion,ConnectionId 其实这五个类就是去完成两件事情的,一件事情是连接,另 ...
- C#五层架构
UI Business Logic Layer Business Rule Layer Data Access Layer Data Definition Layer 简单工厂模式 simple fa ...
随机推荐
- 慕课网SSMOA办公系统
目录 需求分析 1 用例图 系统设计 包及全局配置 数据库设计 工具类 具体功能实现 1 dao层功能实现 2 编码过滤器及登陆拦截器 3 单元测试 遇到的问题总结 1 新建一个Modul不会打开新页 ...
- Activiti工作流学习（一）——Activiti服务类
Activity有9个service1.DynamicBpmnService动态Bpmn服务Service providing access to the repository of process ...
- MySQL Index 索引提示：force or use
一.使用索引提示(Index Hint)的条件 1.Mysql优化器错误的选择了某个索引.这种情况很少发生,需要做数据库的表.索引的统计分析. 2.某个SQL语句可选择的索引非常多,这个时候优化器执行 ...
- BZOJ 4025 二分图 LCT维护最大生成树
怎么说呢,我也不知道该咋讲,你就手画一下然后 yy 一下就发现这么做是对的. 为什么我明明都想出来了,却还是讲不出来啊~ #include <cstdio> #include <ve ...
- pytest学习笔记（一）
这两天在学习pytest,之前有小用到pytest,觉得这个测试框架很灵巧,用在实现接口自动化(pytest+requests)非常的轻便,然后很有兴致的决定学习下,然后又发现了pytest-sele ...
- MySQL数据分析实战-朱元禄-专题视频课程
MySQL数据分析实战-496人已学习 课程介绍 本套课程由知名数据分析博主jacky老师录制,深入浅出讲解MySQL数据分析,从实战角度出发,帮助大家制胜职场!课程收益 1.学会 ...
- codeforces gym #101987K -TV ShowGame（2-SAT）
题目链接: https://codeforces.com/gym/101987 题意: 有长度为$n$的只包含$B,R$的字符串 有m种关系,每个关系说出三个位置的确切字符 这三个位置的字符最多有一个 ...
- Spring框架IOC解说
控制反转——Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创建或者查找依赖对象.你可以认为IoC与JN ...
- 你的windows许可证即将过期
0xC004F025拒绝访问:所请求的操作需要提升特权:解决方法:1.打开我的电脑找到windows System32目录下的cmd 2.对windows System ...
- go结构体的方法和普通函数
package main import ( "fmt" "math" ) type vertex struct { X, Y float64 } //值接收者是 ...