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

发表于 2017-12-26 更新于 2018-01-04 分类于前端， fsLayui 阅读次数：本文字数： 1.1k 阅读时长 ≈ 4 分钟

介绍

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

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

使用说明

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

引入框架基础文件

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

<script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="https://cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css" media="all"/>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_520106_q8xykrwf86ywrk9.css" media="all"/>
<link rel="stylesheet" type="text/css" href="./css/fs.css" media="all"/>
<script type="text/javascript" src="./plugins/layui/layui.js"></script>
<script type="text/javascript" src="./plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./plugins/frame/js/fsDict.js?v=1.6.0"></script>
<script type="text/javascript" src="./plugins/frame/js/fs.js?v=1.6.0"></script>
<script type="text/javascript" src="./plugins/frame/js/main.js?v=1.6.0"></script>

顶部菜单配置

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

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

<ul class="layui-nav layui-layout-left fsTopMenu" id="fsTopMenu" lay-filter="fsTopMenu">
  <li class="layui-nav-item layui-this" dataPid="fs1"><a href="javascript:;"><i class="layui-icon">&#xe68e;</i> <cite>控制台</cite></a></li>
  <li class="layui-nav-item" dataPid="fs2"><a href="javascript:;">测试</a></li>
</ul>

左边二级菜单配置

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

菜单点击处理

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

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

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


<ul class="layui-nav layui-nav-tree fsLeftMenu"  lay-filter="fsLeftMenu" id="fsLeftMenu">
  <li class="layui-nav-item layui-nav-itemed" dataPid="fs1" style="display: none;">
    <a href="javascript:;">案例</a>
    <dl class="layui-nav-child">
      <dd class="layui-this" lay-id="1">
        <a href="javascript:;" menuId="home" dataUrl="views/home/index.html"><i class="layui-icon">&#xe68e;</i> <cite>首页</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="datagrid" dataUrl="views/datagrid/index.html"><i class="layui-icon">&#xe705;</i> <cite>数据表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="datagrid2" dataUrl="views/datagrid2/index.html"><i class="layui-icon">&#xe60a;</i> <cite>数据表格2</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="treeDatagrid" dataUrl="views/treeDatagrid/index.html"><i class="layui-icon">&#xe62c;</i> <cite>树+表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="multiDatagrid" dataUrl="views/multiDatagrid/index.html"><i class="layui-icon">&#xe60a;</i> <cite>多数据表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="tabDatagrid" dataUrl="views/tabDatagrid/index.html"><i class="layui-icon">&#xe609;</i> <cite>tab数据表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="complexDatagrid" dataUrl="views/complexDatagrid/index.html"><i class="layui-icon">&#xe615;</i> <cite>复杂数据表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="linkageDatagrid" dataUrl="views/linkageDatagrid/index.html"><i class="layui-icon">&#xe614;</i> <cite>联动数据表格</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="linkageDatagrid2" dataUrl="views/linkageDatagrid2/index.html"><i class="layui-icon">&#xe658;</i> <cite>联动数据表格(复杂)</cite></a>
      </dd>
      <dd>
        <a href="javascript:;" menuId="staticDatagrid" dataUrl="views/staticDatagrid/index.html"><i class="layui-icon">&#xe6b2;</i> <cite>表格数据提交</cite></a>
      </dd>
    </dl>
  </li>
  <li class="layui-nav-item " dataPid="fs1" style="display: none;">
    <a href="javascript:;">其他页面</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="javascript:;" menuId="demo_404" dataUrl="404.html">404</a>
      </dd>
    </dl>
  </li>
  <li class="layui-nav-item " dataPid="fs2" style="display: none;">
    <a href="javascript:;">基本元素</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;" menuId="demo_button" dataUrl="http://www.layui.com/demo/button.html">按钮</a></dd>
      <dd><a href="javascript:;" menuId="demo_form"  dataUrl="http://www.layui.com/demo/form.html">表单</a></dd>
      <dd><a href="javascript:;" menuId="demo_tab" dataUrl="http://www.layui.com/demo/tab.html">选项卡</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item" dataPid="fs2" style="display: none;">
    <a href="javascript:;" menuId="demo_badge" dataUrl="http://www.layui.com/demo/badge.html">徽章</a>
  </li>
  <li class="layui-nav-item" dataPid="fs2" style="display: none;">
    <a href="javascript:;" menuId="demo_table" dataUrl="http://www.layui.com/demo/table.html">数据表格</a>
  </li>
</ul>