admin管理员组文章数量:1530327
后台模板
搭建的简易后台管理系统模板 基于 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 - 底部固定区域
</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://m.elefans.com/dongtai/1725195714a1012404.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论