fsLayui菜单导航栏使用说明(一)

介绍

支持顶部菜单,左边菜单,菜单导航栏等功能,点击子菜单后,自动打开tab页。
操作流程:通过顶部菜单,切换左边子菜单,点击左边的子菜单,打开tab页。

演示环境地址:http://fslayui.itcto.cn

使用说明

由于菜单导航只有在首页使用,所以不要随意修改标签里面的id、样式或者监听等,避免出现问题,只需要在现有的基础上进行简单的处理即可。

引入框架基础文件

其中最后一个js文件./plugins/frame/js/main.js是项目主页首页处理的函数。

  
  
  
  
  
  
  
  
  
  

顶部菜单配置

顶部菜单只需要处理以下内容中的li标签,通过session或者其他的方式来填充顶部菜单内容,如果需要默认选中,可以在li标签上设置样式layui-this

特殊说明:
dataPid : 可以理解为菜单分组pid,通过这个分组pid,匹配左边的二级菜单


左边二级菜单配置

左边二级菜单配置可以参考官网导航配置点击进入

  • 菜单点击处理

    菜单点击都是通过a标签来处理的,通过定义dataUrl属性来控制打开的页面地址。

  • dataPid定义

    li表情需要定义dataPid,通过这个属性匹配头部一级菜单。相同则匹配 可以参考两个配置示例

  • menuId定义

    菜单唯一个id或者唯一标识,路由使用用到,下文会介绍。



效果图

路由使用

框架默认支持路由功能,在首页地址后面增加#staticDatagrid配置路由信息,其中#号后面配置的是菜单idmenuId,可以参考demo左边二级菜单配置

配置示例:http://fslayuiplugin.fallsea.com/index.html#staticDatagrid

路由访问效果图

本文首发于我的博客:ITCTO技术博客

你可能感兴趣的:(fsLayui菜单导航栏使用说明(一))