大家好，欢迎来到IT知识分享网。
后台模板
搭建的简易后台管理系统模板 基于 layui
先看效果图 很适合初学者 对于刚使用 layui的来说 可以很好的借鉴一下
图片:
第一页 可加群号下载比较完整的代码 805371278
第二页普通的数据展示
第三页 带文件预览下载的数据展示 没有加pdf
第四页 搜索栏展开 默认关闭 也可设置展开
第五页 新增表单
文档格式
好了 开始上代码
先下载好 layui 官网地址 layui
1 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台表单</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style> .layadmin-iframe {
position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #f2f2f2; } .layui-fluid {
padding: 10px; background-color: white; margin: 10px; } </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="./images/img.jpg" class="layui-nav-img">
admin
</a>
<dl class="layui-nav-child">
<dd><a href="">资料</a></dd>
<dd><a href="">设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">主页</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a data_herf="./page/home.html" href="javascript:;">home</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a data_herf="./page/page1.html" href="javascript:;">表单1</a>
</li>
<li class="layui-nav-item">
<a data_herf="./page/page2.html" href="javascript:;">表单2(带文档预览)</a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<iframe class="layadmin-iframe" id="Z_iframe" src="./page/home.html" frameborder="0"></iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© xxxx.com - 底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script> //JavaScript代码区域 layui.use('element', function () {
var element = layui.element; var Z_iframe = document.getElementById("Z_iframe") element.on('nav(test)', function (data) {
// console.log(data) let href = data[0].attributes[0].nodeValue Z_iframe.src = href }); }); </script>
</body>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/21202.html
