后台管理系统模板，简易模板
后台模板搭建的简易后台管理系统模板 基于 layui先看效果图很适合初学者图片:第一页可加群号下载比较完整的代码805371278第二页普通的数据展示第三页带文件预览下载的数据展示 没有加pdf第四页搜索栏展开默认关闭也可设置展开第五页新增表单文档格式好了 开始上代码先下载好 layui官网地址 layui1 html<!DOCTYPE html><html><hea
·
后台模板
搭建的简易后台管理系统模板 基于 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>
快速构建 Web 应用程序
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)