layui内置模块(layer弹出层)
前面我们已经对layui前端框架的页面元素进行了简单的学习,但是作为一个可用的程序,仅仅是长的好看,并没有那个什么用;在好看的同时还需要实用和酷炫,实用就需要实现我们方便的和后端进行数据交互,酷炫就是在安静的页面展示下,带一些酷炫的动态效果,比如弹出个萌萌弹框之类的;所以这一章我们学习的layui框架中的内置模块就是实现这些功能的,下面我们直接上一张内置模块的大纲,就不写目录了,目录看起来并没有那么直观且一目了然。
弹出层(layer)
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="application/javascript" src="index.js"></script>
<script type="application/javascript" src="jquery-3.2.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="application/javascript" src="layui/lay/dest/layui.all.js"></script>
</head>
<body>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<h3>页面层/iframe层</h3><hr>
<button class="layui-btn" onclick="pageFunc1()">弹出页面层</button>
<button class="layui-btn" onclick="iframeFunc1()">iframe层(多媒体)</button>
<button class="layui-btn" onclick="iframeFunc2()">iframe层(带滚动条)</button>
<button class="layui-btn" onclick="iframeFunc3()">iframe层(无滚动条)</button>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<h3>弹出信息框</h3><hr>
<button class="layui-btn layui-btn-normal" onclick="messageboxFunc()">type=0信息框</button>
<button class="layui-btn layui-btn-normal" onclick="messageboxFunc1()">alert信息框</button>
<button class="layui-btn layui-btn-normal" onclick="messageboxFunc2()">msg信息框(常用)</button>
<button class="layui-btn layui-btn-normal" onclick="messageboxFunc3()">msg信息框(带icon)</button>
<button class="layui-btn layui-btn-normal" onclick="messageboxFunc4()">msg信息框(抖动)</button>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<h3>加载层</h3><hr>
<button class="layui-btn layui-btn-warm" onclick="loadFunc0()">type=3加载层</button>
<button class="layui-btn layui-btn-warm" onclick="loadFunc1()">load默认风格</button>
<button class="layui-btn layui-btn-warm" onclick="loadFunc2()">load风格2</button>
<button class="layui-btn layui-btn-warm" onclick="loadFunc3()">load风格3</button>
<button class="layui-btn layui-btn-warm" onclick="loadFunc4()">msg加载层</button>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<h3>tips层</h3><hr>
<button id="tip-btn-1" class="layui-btn layui-btn-normal" onclick="tipFunc0()">type=4tip层</button>
<button id="tip-btn-2" class="layui-btn layui-btn-normal" onclick="tipFunc1()">tip上</button>
<button id="tip-btn-3" class="layui-btn layui-btn-normal" onclick="tipFunc2()">tip下</button>
<button id="tip-btn-4" class="layui-btn layui-btn-normal" onclick="tipFunc3()">tip左</button>
<button id="tip-btn-5" class="layui-btn layui-btn-normal" onclick="tipFunc4()">tip右</button>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<h3>其他弹出层</h3><hr>
<button class="layui-btn" onclick="otherFunc0()">prompt层</button>
<button class="layui-btn" onclick="otherFunc1()">屏蔽滚动条</button>
<button class="layui-btn" onclick="otherFunc2()">弹出即全屏</button>
<button class="layui-btn" onclick="otherFunc3()">tab层</button>
<button class="layui-btn" onclick="otherFunc4()">相册层</button>
</div>
<script>
function pageFunc1() {
layer.open({
type:1,
skin: 'layui-layer-nobg',
closeBtn:1,
shift:2,
shadeClose:true,
content:"<div><h1 style='text-align: center;font-size: larger;margin-top: 80px;'>内容</h1></div>",
title:'页面层标题',
area:['400px','300px']
});
}
function iframeFunc1() {
layer.open({
type: 2,
title: false,
area: ['900px', '600px'],
shade: 0.8,
closeBtn: 1,
shadeClose: false,
content:'//player.youku.com/embed/XMjY3MzgzODg0'
});
}
function iframeFunc2() {
layer.open(
{
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['400px', '80%'],
content: 'http://m.baidu.com'
})
}
function iframeFunc3() {
layer.open({
type:2,
title:'iframe无滚动条',
shadeClose:true,
shade:0.5,
area:['400px','80%'],
content:['http://www.36kr.com','no']
})
}
function messageboxFunc() {
layer.open({
type:0,
title:'信息框',
shadeClose:true,
area:['400px','200px'],
content:"type信息框"
})
}
function messageboxFunc1() {
layer.alert('alert信息框',{
icon:5});
}
function messageboxFunc2() {
layer.msg('常用的msg信息框')
}
function messageboxFunc3() {
layer.msg('表情msg信息框',{
icon:6});
}
function messageboxFunc4() {
layer.msg('抖动msg信息框',function () {
layer.msg('抖动msg信息框结束啦',{
icon:6});
});
}
function loadFunc0() {
layer.open({
type:3
// content:"正在加载中..."
});
//关闭加载层
setTimeout(function () {
layer.closeAll('loading');
},1000)
}
function loadFunc1() {
layer.load();
//关闭加载层
setTimeout(function () {
layer.closeAll('loading');
},1000)
}
function loadFunc2() {
layer.load(1);
//关闭加载层
setTimeout(function () {
layer.closeAll('loading');
},1000)
}
function loadFunc3() {
layer.load(2);
//关闭加载层
setTimeout(function () {
layer.closeAll('loading');
},1000)
}
function loadFunc4() {
layer.msg('加载中...',{icon:16,shade:0.8});
//关闭加载层
setTimeout(function () {
layer.closeAll('loading');
},1000)
}
function tipFunc0() {
layer.open({
type:4,
tips:3,
closeBtn:false,
content:"这是来自open type=4的tips"
});
//关闭加载层
setTimeout(function () {
layer.closeAll('tips');
},2000)
}
function tipFunc1() {
layer.tips('我在上边','#tip-btn-2',{
tips:[1,'#0f0']
});
//关闭加载层
setTimeout(function () {
layer.closeAll('tips');
},1000)
}
function tipFunc2() {
layer.tips('我在下边','#tip-btn-3',{
tips:[3,'#000']
});
//关闭加载层
setTimeout(function () {
layer.closeAll('tips');
},1000)
}
function tipFunc3() {
layer.tips('我在左边','#tip-btn-4',{
tips:[4,'#000']
});
//关闭加载层
setTimeout(function () {
layer.closeAll('tips');
},1000)
}
function tipFunc4() {
layer.tips('我在右边','#tip-btn-5',{
tips:[2,'#000']
});
//关闭加载层
setTimeout(function () {
layer.closeAll('tips');
},1000)
}
function otherFunc0() {
layer.prompt({
formType:2,
value:'Andy',
title:'告诉我你为什么喜欢我?',
area:['600px','300px']
},function (val,index) {
layer.msg('你说:'+val);
layer.close(index)
})
}
function otherFunc1() {
layer.open({
content:'让滚动条不能动',
scrollbar:false
})
}
function otherFunc2() {
var index=layer.open({
type:2,
title:'',
content:'http://36kr.com/',
area:['640px','390px'],
maxmin:true
})
layer.full(index)
}
function otherFunc3() {
layer.tab({
area:['600px','300px'],
//skin:'layui-layer-lan',
shadeClose:true,
tab:[{
title:'tab01',
content:"<div style=' padding:5px;text-align: center;'>一入技术深似海,从此妹纸是浮云</div>"
},{
title:'tab02',
content:'阿阿阿阿阿'
},{
title:'tab03',
content:'噢噢噢奥'
}]
})
}
var jsonData = {
"title":"", //相册标题
"id":123, //相册id
"start":0, //初始显示的图片序号,默认0
"data":[ //相册包含的图片,数组格式
{
"alt": "图片名1",
"pid": 666, //图片id
"src": "http://res.layui.com/images/fly/fly.jpg", //原图地址
"thumb": "" //缩略图地址
},
{
"alt": "图片名3",
"pid": 888, //图片id
"src": "http://res.layui.com/images/fly/layim.jpg", //原图地址
"thumb": "" //缩略图地址
},
{
"alt": "图片名3",
"pid": 999, //图片id
"src": "temp.jpg", //原图地址
"thumb": ""//缩略图地址
}
]
};
function otherFunc4() {
layer.photos({
photos: jsonData,
anim: 4
})
}
</script>
</body>
</html>
layui内置模块(layer弹出层)相关推荐
- php layer弹出层更改背景,layui.layer 弹出层背景透明,前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
- layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等 我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的 所 ...
- html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- layer弹出层扩展自定义样式
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 官网 http://layer.layui.com/ l ...
- jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)
一.问题 在用thinkphp5做到用layer弹出层上传文件过程中,一直不能成功.详细代码如下: HTML代码: <div id="importBox" v-show=&q ...
- JavaScript学习笔记(九)(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证 整体代码 二.layer弹出层 1.引入相 ...
- Layer——弹出层
Layer--弹出层 开发工具与关键技术:Visual Studio 前端 作者:盘子 撰写时间:2019年5月16 日 Layui.layer弹层组件文档,layer是layui的代表作,也只是作为 ...
- layer执行父窗口ajax方法,layer 弹出层 回调函数调用 弹出层页面 函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
- layer弹出层示例
效果图如下: 代码如下: <link rel="stylesheet" href="../static/thirdparty/layui-v2.4.5/css/la ...
最新文章
- Error:(49, 1) A problem occurred evaluating project ':guideview'. Could not read script 'https://r
- 使用Nmap获取目标服务器开放的服务以及操作系统信息
- java连接access2013数据库_滴水穿石–Java连接Access数据库及其操作
- nacos 适配达梦、人大金仓数据库
- 7-150 水仙花数 (20 分)
- Android 学习心得(2)——Android内置数据库SQLite
- 性能分析工具GpProfile
- 一种修复WSL下linux系统问题的方法
- 最新Java全套开发视频教程
- 强力推荐素材收集和管理神器-Eagle工具
- Livy的CDH环境parcel和csd制作
- 将Excel中的矩阵变成列表
- ie11与html不兼容,IE11浏览器网页不兼容怎么办?IE 11浏览器网页不兼容解决方法...
- c语言读取文件与写入文件
- Excel怎样按行排序,干货经验!如何将行数据进行降序排序详细讲解
- 充值10万跌成860元,YAM一日崩盘记
- DHCP简单拓扑图演示
- VQA相关概念简单整理
- 原型设计大师:Axure RP网站与APP设计从入门到精通(全彩) 中文pdf扫描版
- 我来甲方做IT的日子1
热门文章
- 红米k40刷鸿蒙系统,红米K40开孔仅2.8mm,全球最小或命名为无感孔,到底有多极致...
- 字母排序 字符串跟字符串比较大小 字符串跟数字比较大小
- iOS开发系列课程(10) --- 表格视图
- 智能座舱域控制器技术发展趋势分析
- 【工业互联网】周剑:工业互联网平台作用机理和发展路径
- 以小饭桌网站为例介绍抓取动态网页的数据【python爬虫入门进阶】(12)
- 长沙医学院计算机科学与技术专业怎么样,长沙医学院有哪些专业及什么专业好...
- 什么是裸机或OEM硬盘?
- 远程访问堡垒机_如何远程控制堡垒机
- 深度学习技术选型——文本相似度计算