介绍
前面已经介绍了菜单导航栏使用说明(一),此种模式主要对于静态的html页面使用;如果需要动态的菜单功能,那么需要看此文档,本文介绍动态菜单配置使用。
演示环境地址:http://fslayui.itcto.cn
使用说明
动态菜单支持两种模式,1:加载前端缓存数据,2:加载后台接口动态数据
菜单配置
菜单信息在fsMenu.js
文件中配置,文件路径plugins/frame/js/fsMenu.js
,只需要修改文件中的menuConfig
信息,根据实际情况修改。
接口数据必须配置list数组
1 | var menuConfig = { |
配置说明
属性 | 必输 | 名称 | 描述
————|——|————|————|——
dataType | 是 | 获取数据方式 | local本地获取,server 服务端获取;本地获取需要配置data
,服务端获取需要配置loadUrl
loadUrl | 否 | 请求数据地址 | 服务端获取请求数据地址
rootMenuId | 是 | 根目录菜单id值 | 菜单根id,通过此id寻找一级菜单
defaultSelectTopMenuId | 是 | 默认选中的一级菜单 | 一级菜单即是头部菜单
defaultSelectLeftMenuId | 是 | 默认选中的左边菜单 | 左边菜单
menuIdField | 是 | 菜单id字段信息 |
menuNameField | 是 | 菜单名称字段 |
menuIconField | 是 | 菜单图标字段 |
menuHrefField | 是 | 菜单打开地址字段 |
parentMenuIdField | 是 | 父菜单id字段 |
data | 否 | 菜单集合 | 本地菜单集合,必须是list
菜单图标配置说明
菜单图标支持多种模式配置:
使用
font-awesome
图标库只需要进入官网font-awesome,选择好对应的图标,然后在菜单图标字典中配置即可。
例如:复制的按钮图标配置
fa-files-o
使用
layui
官方的图标库进入官网layui,选择图标代码即可。
例如:首页的按钮图标配置

自定义图标库
如果需要自定义图标,那么只需要配置原生的图标配置。
例如:
<i class="layui-icon"></i>
本地菜单配置demo
1 | [ |