LayUI Mini如何配置无限极菜单?
时间: 2024-10-19 12:16:54 浏览: 40
layui无限级导航菜单.zip
LayUI Mini是一个轻量级的前端UI框架,它的无限极菜单(也称为树形导航)可以通过JavaScript和JSON数据轻松配置。以下是基本步骤:
1. **引入库**:首先,在HTML中引入LayUI Mini的核心JS文件和样式文件。
```html
<link rel="stylesheet" href="layui.mini.css">
<script src="layui.mini.js"></script>
```
2. **初始化菜单**:创建一个包含节点的数据结构,每个节点通常包括`id`、`name`(显示文本)、`children`(子节点数组)等属性。然后在JavaScript中使用`layui_mini.tree()`函数初始化菜单,传入菜单的节点数据。
```javascript
var menuData = [
{
id: '0',
name: '一级目录一',
children: [
{ id: '1', name: '二级目录一' },
{ id: '2', name: '二级目录二' }
]
},
// 更多层级...
];
layui.use('mini/tree', function() {
layui.mini.tree({
elem: '#menu', // 菜单容器ID
data: menuData,
method: 'load', // 使用服务器端加载数据
loadChildren: function(node) {
return node.children; // 如果当前节点有children属性,则返回它作为子节点
},
expandAll: true, // 初始状态是否展开所有节点
});
});
```
在这里,`loadChildren`函数用于指定当点击某个节点时,从哪里获取其子节点数据。
阅读全文