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 ...
随机推荐
- C++指针图解
- Appium自动化测试教程-自学网-SDK
SDK:软件开发工具包,被软件开发工程师用于特定的软件包.软件框架.硬件平台.操作系统等建立应用软件的开发工具的集合. 因此,Android SDK指的是Android专属的软件开发工具包. 1,安装 ...
- P4310 绝世好题 按位DP
这名字可海星\(OvO\) 思路:\(DP\) 提交:2次(\(zz\)我竟然把三目运算符写错了\(QwQ\)) 题解: 按位进行\(DP\):\(f[i]\)表示结尾的数字包括\(1<< ...
- P4160 [SCOI2009]生日快乐 搜索
思路:无脑搜索 提交:1次 题解: 大力搜索,枚举每个状态\((x,y,l)\)(\(x\)指分配到的长(可能比\(y\)要短),\(y\)指分配到的宽(可能比\(x\)要长),\(l\)指剩余切的次 ...
- Flutter 初始化数据完成后再加载页面
一.初始化数据完成后再加载数据 1.为了达成这个目标尝试了多种方法总是失败 在Init 和didChangeDependencies 初始化数据过也不行 @override void didChang ...
- 049_指定目录路径,脚本自动将该目录使用 tar 命令打包备份到/data 目录
#!/bin/bash[ ! -d /data ] && mkdir /data #确保有此目录[ -z $1 ] && exit #为空不需要打包if [ -d ...
- wangEditor实现ctrl+v粘贴word图片并上传
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- Java进阶知识24 Spring的事务管理（事务回滚）
1.事务控制概述 1.1.编程式事务控制 自己手动控制事务,就叫做编程式事务控制. Jdbc代码: connection.setAutoCommit(false); ...
- qtableview 表格风格设置
1.窗体无边框? tableView->setFrameShape(QFrame::NoFrame); 2.表格内容无边框? tableView->setShowGrid(false); ...
- python常用模块介绍
关于if __name__ == "__main__": 若执行文件为bin,调用文件为cal: 若在执行文件bin中执行print(__name__) 输出:__main__ 当 ...