介绍
支持顶部菜单,左边菜单,菜单导航栏等功能,点击子菜单
后,自动打开tab页。
操作流程:通过顶部菜单,切换左边子菜单,点击左边的子菜单,打开tab页。
演示环境地址:http://fslayui.itcto.cn
使用说明
由于菜单导航只有在首页使用,所以不要随意修改标签里面的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"></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"></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