Fork me on GitHub

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

介绍

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

演示环境地址:http://fslayuiplugin.fallsea.com

使用说明

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

引入框架基础文件

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

1
2
3
4
5
6
7
8
9
10
<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,匹配左边的二级菜单

1
2
3
4
<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或者唯一标识,路由使用用到,下文会介绍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<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>

路由使用

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

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

FallSea wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!