无限极菜单
bobi
parent
e81a4370ad
commit
e25daa9371
106
data/menu.json
106
data/menu.json
|
|
@ -280,6 +280,112 @@
|
||||||
"spread": false
|
"spread": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "多级菜单",
|
||||||
|
"path": "",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "购物网站",
|
||||||
|
"path": "",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "苏宁",
|
||||||
|
"path": "https://www.suning.com",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "京东",
|
||||||
|
"path": "https://www.jd.com",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "阿里",
|
||||||
|
"path": "",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "淘宝",
|
||||||
|
"path": "https://www.taobao.com",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "天猫",
|
||||||
|
"path": "https://www.tmall.com",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "聚划算",
|
||||||
|
"path": "https://ju.taobao.com",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "二级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "二级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "三级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "三级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "二级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "二级菜单",
|
||||||
|
"path": "pages/use/use-okTab.html",
|
||||||
|
"font": "layui-icon",
|
||||||
|
"icon": "",
|
||||||
|
"spread": false
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
33
index.html
33
index.html
|
|
@ -45,6 +45,39 @@
|
||||||
<div class="layui-side layui-bg-black">
|
<div class="layui-side layui-bg-black">
|
||||||
<div class="layui-side-scroll">
|
<div class="layui-side-scroll">
|
||||||
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="navFilter">
|
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="navFilter">
|
||||||
|
<!--多级导航示例
|
||||||
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
|
<a href="javascript:;">
|
||||||
|
<i class="iconfont icon-huiyuan"></i> 会员管理
|
||||||
|
</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd>
|
||||||
|
<a href="javascript:;" path="pages/user/user.html"><i class="iconfont icon-dianliyonghuzongshu"></i> 用户列表</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;" path="pages/user/user.html"> <i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
|
||||||
|
<dd><a href="javascript:;" path="pages/role/role.html"> <i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
|
||||||
|
<dd>
|
||||||
|
<a href="javascript:;" path="pages/permission/permission.html"> <i class="iconfont icon-jiaoseshouquan"></i> 333</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;" path="pages/user/user.html"> <i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
|
||||||
|
<dd><a href="javascript:;" path="pages/role/role.html"> <i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
|
||||||
|
<dd><a href="javascript:;" path="pages/permission/permission.html"> <i class="iconfont icon-jiaoseshouquan"></i> 333</a></dd>
|
||||||
|
</dl>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</dd>
|
||||||
|
<dd>
|
||||||
|
<a href="javascript:;" path="pages/role/role.html"><i class="iconfont icon-jiaoseguanli"></i> 角色列表</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;" path="pages/user/user.html"> <i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
|
||||||
|
<dd><a href="javascript:;" path="pages/role/role.html"> <i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
|
||||||
|
<dd><a href="javascript:;" path="pages/permission/permission.html"> <i class="iconfont icon-jiaoseshouquan"></i> 333</a></dd>
|
||||||
|
</dl>
|
||||||
|
<dd><a href="javascript:;" path="pages/permission/permission.html"><i class="iconfont icon-jiaoseshouquan"></i> 权限列表</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- 停用
|
<!-- 停用
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:;">
|
<a href="javascript:;">
|
||||||
|
|
|
||||||
|
|
@ -43,14 +43,18 @@ layui.config({
|
||||||
html += "<a href='javascript:;'>"
|
html += "<a href='javascript:;'>"
|
||||||
html += iconHtml(d) + " " + response[i].title;
|
html += iconHtml(d) + " " + response[i].title;
|
||||||
html += "</a>"
|
html += "</a>"
|
||||||
var children = d.children;
|
// var children = d.children;
|
||||||
if (children != undefined && children.length > 0) {
|
// if (children != undefined && children.length > 0) {
|
||||||
html += "<dl class='layui-nav-child'>"
|
// html += "<dl class='layui-nav-child'>"
|
||||||
for (var j = 0; j < children.length; j++) {
|
// for (var j = 0; j < children.length; j++) {
|
||||||
html += "<dd><a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a></dd>";
|
// html += "<dd>";
|
||||||
}
|
// html += "<a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a>";
|
||||||
html += "</dl>"
|
// html += "</dd>";
|
||||||
}
|
// }
|
||||||
|
// html += "</dl>"
|
||||||
|
// }
|
||||||
|
var temp = createMenu(d.children);
|
||||||
|
html += temp;
|
||||||
html += "</li>";
|
html += "</li>";
|
||||||
}
|
}
|
||||||
$(".layui-nav-tree").html(html);
|
$(".layui-nav-tree").html(html);
|
||||||
|
|
@ -59,6 +63,16 @@ layui.config({
|
||||||
console.log(error)
|
console.log(error)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function liHtml(obj) {
|
||||||
|
var html = "";
|
||||||
|
if (obj.spread) {
|
||||||
|
html += "<li class='layui-nav-item layui-nav-itemed'>";
|
||||||
|
} else {
|
||||||
|
html += "<li class='layui-nav-item'>";
|
||||||
|
}
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
function iconHtml(obj) {
|
function iconHtml(obj) {
|
||||||
var html = "";
|
var html = "";
|
||||||
if (obj.icon) {
|
if (obj.icon) {
|
||||||
|
|
@ -75,12 +89,29 @@ layui.config({
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function liHtml(obj) {
|
function createMenu(obj) {
|
||||||
var html = "";
|
var html = "";
|
||||||
if (obj.spread) {
|
if (obj != undefined && obj.length > 0) {
|
||||||
html += "<li class='layui-nav-item layui-nav-itemed'>";
|
html += "<dl class='layui-nav-child'>"
|
||||||
} else {
|
for (var j = 0; j < obj.length; j++) {
|
||||||
html += "<li class='layui-nav-item'>";
|
html += "<dd>";
|
||||||
|
html += "<a href='javascript:;' path='" + obj[j].path + "'>" + iconHtml(obj[j]) + " " + obj[j].title + "</a>";
|
||||||
|
var children = obj[j].children;
|
||||||
|
if (children != undefined && children.length > 0) {
|
||||||
|
html += createMenu(children);
|
||||||
|
}
|
||||||
|
html += "</dd>";
|
||||||
|
}
|
||||||
|
html += "</dl>"
|
||||||
|
}
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
function createSpace(num) {
|
||||||
|
var html = "";
|
||||||
|
for (var i = 0; i < num; i++) {
|
||||||
|
html += " ";
|
||||||
}
|
}
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
@ -89,12 +120,13 @@ layui.config({
|
||||||
* 监听导航菜单的点击
|
* 监听导航菜单的点击
|
||||||
*/
|
*/
|
||||||
element.on("nav(navFilter)", function (elem) {
|
element.on("nav(navFilter)", function (elem) {
|
||||||
var attrNum = elem.context.attributes.length;
|
var path = elem.context.attributes.path;
|
||||||
if (attrNum == 2) {
|
console.log(path);
|
||||||
|
if (path && path.textContent != "") {
|
||||||
// var title = elem.context.innerHTML;
|
// var title = elem.context.innerHTML;
|
||||||
var title = elem.context.innerText;
|
var title = elem.context.innerText;
|
||||||
title = title.substring(title.indexOf(" "), title.length);
|
title = title.substring(title.indexOf(" "), title.length);
|
||||||
var path = elem.context.attributes.path.textContent;
|
var path = path.textContent;
|
||||||
okTab.add(title, path)
|
okTab.add(title, path)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
"use strict";
|
||||||
|
layui.define(["element", "okUtils"], function (exports) {
|
||||||
|
var element = layui.element;
|
||||||
|
var okUtils = layui.okUtils;
|
||||||
|
var $ = layui.jquery;
|
||||||
|
|
||||||
|
var okMenu = {}
|
||||||
|
|
||||||
|
exports("okMenu", okMenu);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue