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 ...
随机推荐
- 5、组件注册-@Scope-设置组件作用域
5.组件注册-@Scope-设置组件作用域 IOC容器默认都是单实例的 /** * * {@link ConfigurableBeanFactory#SCOPE_SINGLETON SCOPE_SIN ...
- paramiko的使用
import paramiko import sys user = "root" pwd = " # 上传文件 def sftp_upload_file(server_p ...
- E:last-child
E:last-child 语法: E:last-child { sRules } 说明: 匹配父元素的最后一个子元素E.大理石平台厂家大理石平台厂家 要使该属性生效,E元素必须是某个元素的子元素,E的 ...
- robotframework出现错误：Keyword 'AppiumLibrary.Open Application' expected 1 to 2 non-keyword arguments,got 5.
robotframework官网: http://robotframework.org/#introduction -------------- 出现的场景: 由于一开始不了解robotframewo ...
- [Luogu] 网络
https://www.luogu.org/problemnew/show/P3250 树链剖分 + 线段树 + 优先队列 要求未被影响的请求中最大的 所以每次将每条路径在整棵树上的补集的每个节点的优 ...
- devstack cinder-volume服务状态为down
cinder-manage service list 查看到有一个 xxx状态 Binary Host Zone Status State Updated At RPC Version Object ...
- WPF中，Grid与Table的区别(英文)-转载
原文地址:http://blog.csdn.net/johnsuna/article/details/1742799 How is Grid Different from Table?Table an ...
- Selenium处理授权框,登录框,握手框
在Web自动化中,常常遇到三种弹框: JavaScript警告框,如alert,confirm,prompt等,如下图: 处理方法为driver.switch_to.alert().dismiss() ...
- python 监听键盘事件pyHook
#coding=utf- import pyHook import pythoncom # 监听到鼠标事件调用 def onMouseEvent(event): if(event.MessageNam ...
- docker 安装redis 注意事项
一. redis配置文件修改(重要) ~/redis.conf 中daemonize=NO.非后台模式,如果为YES 会的导致 redis 无法启动,因为后台会导致docker无任务可做而退出. 三 ...