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 ...
随机推荐
- Spring自动注入Bean
通过@Autowired或@Resource来实现在Bean中自动注入的功能,但还要在配置文件中写Bean定义,下面我们将介绍如何注解Bean,从而从XML配置文件 中完全移除Bean定义的配置. 1 ...
- 快速了解AMD、CMD、CommonJS、ESM
1.ES6 Module javascript在ES2015(ES6)中出现了语言层面的模块(module). ES6的模块既可以用于浏览器端,也可以用于服务器端(nodeJS). ES6模块是静态化 ...
- npm源管理
1. 安装淘宝镜像 为了提高npm的安装速度,可以使用淘宝镜像. 使用淘宝镜像的方法有两种: 1. npm install -g cnpm --registry=https://registry.np ...
- HashMap判断键是否为null
用containsKey(),而不用get(): HashMap中,null可以作为键,这样的键只有一个:可以有一个或多个键所对应的值为null.当get()方法返回null值时,即可以表示HashM ...
- 012_使用死循环实时显示 eth0 网卡发送的数据包流量
#!/bin/bash while : do echo '本地网卡 eth0 流量信息如下: ' #grep输出所找整行,awk直接输出第5列 ifconfig eth0 | grep "R ...
- luogu2034
/* * 正难则反 * f[i] 表示前 i 个数中被删除的数的最小和 * f[i] = min(f[j]) + num, i - k + 1 <= j < i; * 单调队列维护 */ ...
- [转]vc中调用其他应用程序的方法（函数） winexec，shellexecute ，createprocess
三个SDK函数: WinExec,ShellExecute ,CreateProcess可以实现调用其他程序的要求,其中以WinExec最为简单,ShellExecute比WinExec灵活一些,Cr ...
- HTTPie 工具使用入门
HTTPie 是一个 HTTP 的命令行客户端,目标是让 CLI 和 web 服务之间的交互尽可能的人性化.这个工具提供了简洁的 http 命令,允许通过自然的语法发送任意 HTTP 请求数据,展示色 ...
- c++ 判断是元音还是辅音
#include <iostream> using namespace std; int main() { char c; int isLowercaseVowel, isUppercas ...
- MD5介绍
md5介绍 1. md5简介 md5的全称是md5信息摘要算法(英文:MD5 Message-Digest Algorithm ),一种被广泛使用的密码散列函数,可以产生一个128位(16字节,1字节 ...