fsLayui菜单导航栏使用说明(一)
2018-01-13 本文已影响5065人
fallsea
介绍
支持顶部菜单，左边菜单，菜单导航栏等功能，点击
子菜单后，自动打开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"></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"></i> <cite>首页</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="datagrid" dataUrl="views/datagrid/index.html"><i class="layui-icon"></i> <cite>数据表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="datagrid2" dataUrl="views/datagrid2/index.html"><i class="layui-icon"></i> <cite>数据表格2</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="treeDatagrid" dataUrl="views/treeDatagrid/index.html"><i class="layui-icon"></i> <cite>树+表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="multiDatagrid" dataUrl="views/multiDatagrid/index.html"><i class="layui-icon"></i> <cite>多数据表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="tabDatagrid" dataUrl="views/tabDatagrid/index.html"><i class="layui-icon"></i> <cite>tab数据表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="complexDatagrid" dataUrl="views/complexDatagrid/index.html"><i class="layui-icon"></i> <cite>复杂数据表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="linkageDatagrid" dataUrl="views/linkageDatagrid/index.html"><i class="layui-icon"></i> <cite>联动数据表格</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="linkageDatagrid2" dataUrl="views/linkageDatagrid2/index.html"><i class="layui-icon"></i> <cite>联动数据表格(复杂)</cite></a>
</dd>
<dd>
<a href="javascript:;" menuId="staticDatagrid" dataUrl="views/staticDatagrid/index.html"><i class="layui-icon"></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>
效果图
路由使用
框架默认支持路由功能，在首页地址后面增加
#staticDatagrid配置路由信息，其中#号后面配置的是菜单idmenuId，可以参考demo左边二级菜单配置。
配置示例：http://fslayuiplugin.fallsea.com/index.html#staticDatagrid
路由访问效果图
本文首发于我的博客：ITCTO技术博客
