您的位置：首页 > 其它

经典Dialog插件Layer

2016-04-23 20:04 176 查看

Github上只有一个test，所以最好还是到官网去学习，官网的示例写的很详尽，难得一见的设计思路和灵活性都极好的插件。下面是我自己test过的demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/layer/layer.js"></script>
<style type="text/css">
.popup1{
background: #eee;
padding: 10px;
font-size: 0.8rem;
}

.popup2{
background: #d12;
width: 500px;
height: 200px;
}

.cust{
width:500px;
height:200px;
padding:20px;
}

.page{
padding:20px;
}
</style>
</head>
<body>
<div>
<input type="button" id="alert1" value="默认警告框alert" />
<input type="button" id="alert2" value="带icon的警告框alert" />
<input type="button" id="msg1" value="默认提示框msg" />
<input type="button" id="msg2" value="带icon的提示框msg" />
<input type="button" id="confirm" value="确认框询问层confirm" />
<input type="button" id="catch" value="捕获窗口" />
<input type="button" id="page" value="页面层" />
<input type="button" id="cust" value="自定义层" />
<input type="button" id="tips" value="tips层" />
<input type="button" id="iframe1" value="iframe层" />
</div>

<div class="popup1">
<p>我是条会跳来跳去的狗</p>
</div>

<script>
$("#alert1").on("click", function(){
layer.alert("这是默认alert的结果");
});

$("#alert2").on("click", function(){
layer.alert("这是带icon的alert的结果",{icon: 1, shift: 4, title: "alert"});
});

$("#msg1").on("click", function(){
layer.msg("这是默认msg的结果");
});

$("#msg2").on("click", function(){
layer.msg("这是带icon的msg的结果",{icon: 1});
});

$("#confirm").on("click", function(){
layer.confirm('你是狗吗？', {btn: ['我是','我不是']}, function(){
layer.msg('哈哈哈你是狗', {icon: 1});
}, function(){
layer.msg('你确定你不是狗？', {
time: 20000, //20s后自动关闭
btn: ['真的不是', '不玩了']
});
});
});

$("#catch").on("click", function(){
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.popup1'), //捕获的元素
cancel: function(index){
layer.close(index);
this.content.show();
layer.msg('注意看，我又跳回去了', {time: 5000, icon:6});
}
});
});

$("#page").on("click", function(){
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: '<div class="page">你真的是一条狗！！！</div>'
});
});

$("#cust").on("click", function(){
layer.open({
type: 1,
skin: 'popup2', //样式类名
closeBtn: 0, //不显示关闭按钮
shift: 2,
shadeClose: true, //开启遮罩关闭
content: '<div class="cust">你真的是一条狗！！！</div>'
});
});

$("#tips").on("click", function(){
layer.tips('Hi，我是tips', '#tips', {time: 1000});
});

$("#iframe1").on("click", function(){
layer.open({
type: 2,
title: 'Baidu.com',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'http://www.baidu.com' //iframe的url
});
});
</script>
</body>
</html>

官网
http://layer.layui.com/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航