ok-admin/pages/use/use-okMenu.html

166 lines
4.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>okMenu使用</title>
<link rel="stylesheet" href="../../css/okadmin.css">
</head>
<body>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>框架使用</cite></a>
<a><cite>okMenu使用</cite></a>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<br>
<!--代码块1-->
<blockquote class="layui-elem-quote">
菜单树json串
</blockquote>
<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
{
"status": 1000,
"msg": "操作成功",
"data": {
"title": "多级菜单",
"path": "",
"font": "layui-icon",
"icon": "&#xe658;",
"spread": false,
"children": [
{
"title": "购物网站",
"path": "",
"font": "layui-icon",
"icon": "&#xe658;",
"spread": false,
"children": [
{
"title": "苏宁",
"path": "https://www.suning.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "京东",
"path": "https://www.jd.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "阿里",
"path": "",
"font": "layui-icon",
"icon": "&#xe658;",
"spread": false,
"children": [
{
"title": "淘宝",
"path": "https://www.taobao.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "天猫",
"path": "https://www.tmall.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "聚划算",
"path": "https://ju.taobao.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
}
]
}
]
},
{
"title": "新浪微博",
"path": "https://www.sina.com.cn",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "搜索引擎",
"path": "",
"font": "layui-icon",
"icon": "&#xe658;",
"spread": false,
"children": [
{
"title": "百度",
"path": "https://www.baidu.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "谷歌",
"path": "https://www.google.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "360搜索",
"path": "https://www.so.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
}
]
},
{
"title": "搜狐",
"path": "http://www.sohu.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
},
{
"title": "网易",
"path": "https://www.163.com",
"font": "layui-icon",
"icon": "&#xe600;",
"spread": false
}
]
}
}
</pre>
<!--代码块2-->
<blockquote class="layui-elem-quote">
调用生成菜单树
</blockquote>
<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
// 生成左侧菜单树
okMenu.generatorMenu("data/menu.json", "get");
</pre>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "code"], function () {
layui.code({about: false});
});
</script>
</body>
</html>