关于layui-layer独⽴组件--弹出层
===============================================================================
【注意事项】
⼀、使⽤时，请把⽂件夹layer整个放置在您站点的任何⼀个⽬录，只需引⼊layer.js即可，除jQuery外，其它⽂件⽆需再引⼊。
⼆、如果您的js引⼊是通过合并处理或者您不想采⽤layer⾃动获取的绝对路径，您可以通过fig()来配置（详见官⽹API页）
三、jquery需1.8+
四、更多使⽤说明与演⽰，。
=======================================================================================
下载layer后，把它部署到你项⽬中的任何⼀个⽬录（当然，我们推荐放在前端相关⽬录⾥），你不能去挪动layer⾥⾯的⽂件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer⽂件夹引⼊你的⽂件中，⽽不是单单引⼊layer.js⽂件)
你不必去管那些⽂件是⼲嘛的，你只需要认准⼀个⽂件：layer.js 没错，当你试图在页⾯呈现layer的时候，你应该这样去做：（最简单的⽰例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn{
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="btn">点我</div>
<!--你必须先引⼊jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(".btn").bind("click",function(){
layer.msg('点我的⼈最美！');
});
</script>
</body>
</html>
$("#btn").bind("click",function(){
//layer.msg('点我的⼈最美！');
layer.msg('此商品不存在或者已下架，看看其他商品吧！', {
time: 3000
});
});
更多⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.
btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 500px;
margin-left: 500px;
}
</style>
</head>
<body>
<div class="btn" id="btn">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div>
access数据库程序设计二级考试考什么<!--你必须先引⼊jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){更新sql语句
$("#btn").bind("click",function(){
layer.msg('点我的⼈最美！');
});
//弹出⼀个页⾯层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div >⾃定义内容--添加⾃⼰需要的描述内容\<\/div>' });
});
//弹出⼀个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe⽗⼦操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
//弹出⼀个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处⽤setTimeout演⽰ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
});
//弹出⼀个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
});
</script>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ <!DOCTYPE html>
concatenate函数加符号<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
jquery下载文件请求text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="btn" id="btn">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div>
<div class="btn" id="test6">点我test6</div>
<div class="btn" id="test7">点我test7</div>
<div class="btn" id="test8">点我test8</div>
<div class="btn" id="test9">点我test9</div>
<!--你必须先引⼊jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg('点我的⼈最美！');
});
//弹出⼀个页⾯层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div >⾃定义内容--添加⾃⼰需要的描述内容\<\/div>'
});
});
//弹出⼀个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe⽗⼦操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
//弹出⼀个loading层
$('#test4').on('click', function(){
var ii = layer.load();
/
/此处⽤setTimeout演⽰ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);自己做oracle分布式数据库
});
//弹出⼀个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
//======================================
//多窗⼝模式，层叠置顶
$('#test6').on('click', function(){
layer.open({
type: 2 //此处以iframe举例
,title: '当你选择该窗体时，即会在最顶端'
,area: ['390px', '330px']
,shade: 0
,offset: [ //为了演⽰，随机坐标
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-390)
]
,maxmin: true
,
content: 'settop.html'
,btn: ['继续弹出', '全部关闭'] //只是为了演⽰
,yes: function(){
$(that).click(); //此处只是为了演⽰，实际使⽤可以剔除
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex //重点1
,success: function(layero){
layer.setTop(layero); //重点2
}
});
});
//配置⼀个透明的询问框
$('#test7').on('click', function(){
layer.msg('⼤部分参数都是可以公⽤的<br>合理搭配，展⽰不⼀样的风格', { time: 20000, //20s后⾃动关闭
btn: ['明⽩了', '知道了', '哦']
});
});
//⽰范⼀个公告层
$('#test8').on('click', function(){
layer.open({
type: 1软件测试接口测试工具
,title: false//不显⽰标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定⼀个id，防⽌重复弹出
,resize: false
,btn: ['⽕速围观', '残忍拒绝']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,
content: '<div >内容<br>内容</div>' ,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'www.layui/'
,target: '_blank'
});
}
});
});
//边缘弹出
$('#test9').on('click', function(){
layer.open({
type: 1
,offset: 'c' //具体配置参考：offset参数项(t、r、b、l、c)
,content: '<div >内容</div>'
,btn: '关闭全部'
,btnAlign: 'c' //按钮居中
,shade: 0 //不显⽰遮罩
,yes: function(){
layer.closeAll();
}
});
});
});
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论