用代码写一个在layui里能运行的菜单管理系统
时间: 2024-03-09 09:45:41 浏览: 56
使用c语言实现菜单管理系统
以下是一个简单的菜单管理系统示例,使用了LayUI框架的一些组件和样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单管理系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<h1>菜单管理系统</h1>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">菜单列表</div>
<div class="layui-card-body">
<ul class="layui-nav layui-nav-tree" lay-filter="menuList">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">系统设置</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">基本设置</a></dd>
<dd><a href="javascript:;">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">用户管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">添加用户</a></dd>
<dd><a href="javascript:;">用户列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">文章管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">添加文章</a></dd>
<dd><a href="javascript:;">文章列表</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md8">
<div class="layui-card">
<div class="layui-card-header">菜单详情</div>
<div class="layui-card-body">
<p>请在左侧选择菜单项</p>
</div>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
// 监听菜单点击
element.on('nav(menuList)', function(elem){
var text = elem.text();
layer.msg('你点击了 '+ text);
});
});
</script>
</body>
</html>
```
这个示例使用了LayUI的树形菜单和卡片组件。左侧是一个树形菜单,右侧是一个卡片组件,用于显示所选菜单项的详细信息。当用户点击左侧菜单项时,会触发一个事件,弹出一个提示框显示菜单项的文本内容。你需要将上面的代码保存在一个HTML文件中,将LayUI的CSS和JavaScript文件放在一个名为“layui”的文件夹中,将整个文件夹与HTML文件放在同一个目录中,然后在浏览器中打开该HTML文件即可查看效果。
阅读全文