前言：layer文档中是这样解释的：再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2开始使用Layui中的layer模块</title>
<link rel="stylesheet" href="css/layui.css">
<style>
h2 {
font-size: 20px;
font-weight: 600;
}
h2:after {
content: "——————类别";
}
hr {
border-top: 2px solid red;
}
</style>
</head>
<body>
<h2 class="aa ">出现弹框及二级弹框</h2>
<p id="cc" style="display: none;">第一层弹框的内容<span id="ss" style="color:green;">按钮(点击出现第二次弹框)</span></p>
<p id="dd" style="display: none;">这是第二层弹框里面的内容</p>
<hr />
<h2>各种不同的弹框更多内容请查看文档</h2>
<button class="btn1">弹出层1(普通弹框提示)</button>
<button class="btn2">弹出层2(弹框内容指向dom)</button><span class="btn2span" style="display: none;">哈哈</span>
<button class="btn3">弹出层3(弹出iframe)</button>
<button class="btn4" id="btn4">弹出层4(当前点处弹出小提示)</button><br />
<img style="border:1px solid #ddd;" src="css/modules/layer/default/icon.png" alt="" />
<div class="iconbtnlist">
<button val="0">弹出icon0</button>
<button val="1">弹出icon1</button>
<button val="2">弹出icon2</button>
<button val="3">弹出icon3</button>
<button val="4">弹出icon4</button>
<button val="5">弹出icon5</button>
<button val="6">弹出icon6</button>
<button val="7">弹出icon7</button>
</div>
<hr />
<h2>分页</h2>
<div id="test1"></div>
<hr />
<h2>分页表格js展示1(可table标签直接展示，更多请查看文档)</h2>
<table id="demo" lay-filter="test"></table>
<hr />
<h2>轮播</h2>
<div class="layui-carousel" id="test2">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<script src="layui.js"></script>
<script>
// 在 layui 中使用 layer
// 出现弹框
layui.use('layer', function() {
layer.msg('hello'); //默认显示几秒后消失
var $ = layui.jquery;
$(".aa").click(function() {
parent.layer.open({
type: 1,
title: "第一层弹框",
resize: false,
area: ['420px', '240px'], //宽高
content: $('#cc')
});
})
$("#ss").click(function() {
parent.layer.open({
type: 1,
title: "第二层弹框",
area: ['420px', '240px'], //宽高
content: $('#dd')
});
})
$(".btn1").click(function() {
layer.open({
type: 1,
title: $(this).text(),
content: '传入任意的文本或html' //这里content是一个普通的String
});
})
$(".btn2").click(function() {
layer.open({
type: 1,
title: $(this).text(),
content: $(".btn2span") //这里content是一个DOM,注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
})
$(".btn3").click(function() {
layer.open({
type: 2,
area: ['400px', '400px'], //宽高
content: ['http://www.baidu.com', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
})
$(".btn4").click(function() {
layer.open({
type: 4,
content: ['这是第四的按钮', '#btn4'] //数组第二项即吸附元素选择器或者DOM
});
})
$(".iconbtnlist").on("click", "button", function() {
var v = $(this).attr("val")
layer.alert("这个icon是第" + v + "个", {
icon: v
});
})
});
// 分页
layui.use('laypage', function() {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
limit: 12, //不传的话默认每页10条
prev: "上", //自定义按钮内容
count: 100, //数据总数，从服务端得到
jump: function(obj, first) {
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first) {
//do something
}
}
});
});
// 分页表格
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
height: 315,
width: 1000,
url: 'page.json' //数据接口
,
page: true //开启分页
,
cols: [
[ //表头
{
field: 'id',
title: 'IDsdh',
width: 80,
sort: true,
fixed: 'center'
}, {
field: 'username',
title: '用户名',
width: 80
}, {
field: 'sex',
title: '性别',
width: 80,
sort: true,
align: 'center'
}, {
field: 'city',
title: '城市',
width: 80
}, {
field: 'sign',
title: '签名',
width: 177,
align: 'center'
}, {
field: 'experience',
title: '积分',
width: 80,
sort: true
}, {
field: 'score',
title: '评分',
width: 80,
sort: true
}, {
field: 'classify',
title: '职业',
width: 80
}, {
field: 'wealth',
title: '财富',
width: 135,
sort: true
}
]
]
});
});
// 轮播
layui.use('carousel', function() {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test2',
width: '100%' //设置容器宽度
,
arrow: 'always' //始终显示箭头
,
autoplay: true,
interval: 2000,
arrow: "hover"
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
</html>
page.json
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}, {
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
}, {
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
}, {
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
}, {
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
}, {
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
}, {
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
}, {
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
}, {
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
}, {
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
}
]
}