Layui框架完成后台布局

摘要：layui框架是一款快速创建后台管理系统的框架，最大的好处就是便利快捷引入项目中，使用layui常用组件，快速布局，导航，面包屑导航，数据表格，富文本编辑器这个是一个快速布局的代码，可以快速定义你的后台系统布局。<!DOCTYPE html> <html> <head> <meta charset="utf-8"

layui框架是一款快速创建后台管理系统的框架，最大的好处就是便利快捷引入项目中，使用layui常用组件，快速布局，导航，面包屑导航，数据表格，富文本编辑器这个是一个快速布局的代码，可以快速定义你的后台系统布局。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>后台管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="../static/plugins/layui/css/layui.css" />
	<script type="text/javascript" src="../static/plugins/layui/layui.js"></script>
	<style type="text/css">
		.header {
			width: 100%;
			height: 50px;
			line-height: 50px;
			background: #2e6da4;
			color: #ffffff;
		}

		.title {
			margin-left: 20px;
			font-size: 20px;
		}

		.userinfo {
			float: right;
			margin-right: 10px;
		}

		.userinfo a {
			color: #ffffff;
		}

		.menu {
			width: 200px;
			background: #333744;
			position: absolute;
		}

		.main {
			position: absolute;
			left: 200px;
			right: 0;
		}

		.layui-collapse {
			border: none;
		}

		.layui-colla-item {
			border-top: none;
		}

		.layui-colla-title {
			background: #42485b;
			color: #ffffff;
		}

		.layui-colla-content {
			border-top: none;
			padding: 0;
		}
	</style>
</head>

<body>
	<!-- 头部 -->
	<div class="header">
		<span class="title">JD商城--后台管理系统</span>
		<span class="userinfo">admin [系统管理员] <span> <a href="javascript:;" onclick="logout()"> 退出 </a> </span> </span>
	</div>
	<!-- 菜单 -->
	<div class="menu" id="menu">
		<div class="layui-collapse">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">管理员管理</h2>
				<div class="layui-colla-content layui-show">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;" onclick="MenuFire(this)" src="admin.html">管理员列表</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">权限管理</h2>
				<div class="layui-colla-content ">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;" onclick="MenuFire(this)" src="menu.html">菜单管理</a>
						</li>
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;"onclick="MenuFire(this)" src="roles.html">角色管理</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">系统设置</h2>
				<div class="layui-colla-content ">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;">默认展开</a>

						</li>
					</ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">商品分类</h2>
				<div class="layui-colla-content ">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;">默认展开</a>

						</li>
					</ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">产品管理</h2>
				<div class="layui-colla-content ">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
						<li class="layui-nav-item layui-nav-itemed">
							<a href="javascript:;">默认展开</a>

						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 主操作界面 -->
	<div class="main">
		<iframe src="welcome.html" onload="resetMainHeight(this)" frameborder="0" style="width: 100%;height: 100%;" scrolling="0"></iframe>
	</div>

	<script>
		layui.use(['element', 'layer'], function () {
			var element = layui.element;
			layer = layui.layer;
			$ = layui.jquery
			resetMenuHeight()
		});

		function logout() {
			layer.confirm('确定要退出吗？', {
				icon: 3,
				btn: ['确定', '取消'] //可以无限个按钮
			}, function (index, layero) {
				//按钮【按钮一】的回调
			}, function (index) {
				//按钮【按钮二】的回调
			});
		}
		//重设菜单容器高度
		function resetMenuHeight() {
			var height = document.documentElement.clientHeight - 50;
			$('#menu').height(height)
		}

		function MenuFire(obj) {
			var src = $(obj).attr('src')
			$('iframe').attr('src', src)
		}
		function resetMainHeight(obj) {
			var height = parent.document.documentElement.clientHeight - 50;
			$(obj).parent('div').height(height);
		}
	</script>
</body>

</html>

批改老师：灭绝师太批改时间：2019-01-16 09:07:17
老师总结：完成的不错，现在耐心一点可以自己完成一个属于自己的后台啦！

Layui框架完成后台布局

热门词条