后台管理项目页面搭建模板
Posted qq628b229e2808e
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了后台管理项目页面搭建模板相关的知识，希望对你有一定的参考价值。
资料准备
- 资料下载地址为：https://wws.lanzous.com/i9Q9Mgi22zi
- 创建一个普通的纯 html 项目引入 EasyUI 上面我给出了下载地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT6666权限管理系统</title>
<link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>
Layout布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT6666权限管理系统</title>
<link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
<style>
*
padding: 0;
margin: 0;
</style>
</head>
<body class="easyui-layout">
<div data-options="region:north" style="height:100px;background: #ec4e00;padding: 20px 20px">
<img src="main_logo.png"/>
</div>
<div data-options="region:south" style="height:50px;padding-top: 15px;border-bottom: 3px solid #ec4e00;">
<p align="center" font-size="14px">Copyright (c) 2020-2030 IT6666.Co.Ltd. All Rights Reserved.</p>
</div>
<div data-options="region:west,split:true" style="width:300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单" data-options="iconCls:icon-save,selected:true" style="overflow:auto;padding:10px;">
<ul id="tree"></ul>
</div>
<div title="Title2" data-options="iconCls:icon-reload" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:center" style="padding:5px;background:#eee;">
<div id="tabs">
</div>
</div>
<script>
$(function ()
$(#tree).tree(
url: tree.json,
lines: true,
onClick: function (node)
// 在添加标签之前，做判断，判断这个标签是否存在
let exists = $(#tabs).tabs(exists, node.text);
if (exists)
// 存在就选中
$(#tabs).tabs(select, node.text);
else
// 不存在就添加
$("#tabs").tabs("add",
title: node.text,
closable: true,
content: `<iframe src=$node.attributes.url width="100%" height="100%" frameborder="0"></iframe>`
);
);
$(#tabs).tabs(
fit: true
);
);
</script>
</body>
</html>
动态添加标签页
...
<div data-options="region:west,split:true" style="width:300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单" data-options="iconCls:icon-save,selected:true" style="overflow:auto;padding:10px;">
<ul id="tree"></ul>
</div>
<div title="Title2" data-options="iconCls:icon-reload" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:center" style="padding:5px;background:#eee;">
<div id="tabs">
</div>
</div>
<script>
$(function ()
$(#tree).tree(
url: tree.json,
lines: true,
onClick: function (node)
// 在添加标签之前，做判断，判断这个标签是否存在
let exists = $(#tabs).tabs(exists, node.text);
if (exists)
// 存在就选中
$(#tabs).tabs(select, node.text);
else
// 不存在就添加
$("#tabs").tabs("add",
title: node.text,
closable: true,
content: `<iframe src=$node.attributes.url width="100%" height="100%" frameborder="0"></iframe>`
);
);
$(#tabs).tabs(
fit: true
);
);
</script>
...
Tabs页面引入
修改 index.html
...
<script>
$(function ()
以上是关于后台管理项目页面搭建模板的主要内容，如果未能解决你的问题，请参考以下文章从零开始搭建vue+element-ui后台管理系统项目到上线
vue+element-ui JYAdmin后台管理系统模板-集成方案项目搭建篇1
vue+element-ui JYAdmin后台管理系统模板-集成方案项目搭建篇2