layui中的layer模块运用

最新推荐文章于 2024-08-19 10:04:27 发布

dongsdh

最新推荐文章于 2024-08-19 10:04:27 发布

阅读量1.7k

点赞数

分类专栏：第三方-layer

本文链接：https://blog.csdn.net/dongsdh/article/details/79806640

版权

第三方-layer 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言：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
		}
	]
}