无限极菜单
bobi
parent
e81a4370ad
commit
e25daa9371
106
data/menu.json
106
data/menu.json
|
|
@ -280,6 +280,112 @@
|
|||
"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-scroll">
|
||||
<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">
|
||||
<a href="javascript:;">
|
||||
|
|
|
|||
|
|
@ -43,14 +43,18 @@ layui.config({
|
|||
html += "<a href='javascript:;'>"
|
||||
html += iconHtml(d) + " " + response[i].title;
|
||||
html += "</a>"
|
||||
var children = d.children;
|
||||
if (children != undefined && children.length > 0) {
|
||||
html += "<dl class='layui-nav-child'>"
|
||||
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 += "</dl>"
|
||||
}
|
||||
// var children = d.children;
|
||||
// if (children != undefined && children.length > 0) {
|
||||
// html += "<dl class='layui-nav-child'>"
|
||||
// for (var j = 0; j < children.length; j++) {
|
||||
// html += "<dd>";
|
||||
// html += "<a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a>";
|
||||
// html += "</dd>";
|
||||
// }
|
||||
// html += "</dl>"
|
||||
// }
|
||||
var temp = createMenu(d.children);
|
||||
html += temp;
|
||||
html += "</li>";
|
||||
}
|
||||
$(".layui-nav-tree").html(html);
|
||||
|
|
@ -59,6 +63,16 @@ layui.config({
|
|||
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) {
|
||||
var html = "";
|
||||
if (obj.icon) {
|
||||
|
|
@ -75,12 +89,29 @@ layui.config({
|
|||
return html;
|
||||
}
|
||||
|
||||
function liHtml(obj) {
|
||||
function createMenu(obj) {
|
||||
var html = "";
|
||||
if (obj.spread) {
|
||||
html += "<li class='layui-nav-item layui-nav-itemed'>";
|
||||
} else {
|
||||
html += "<li class='layui-nav-item'>";
|
||||
if (obj != undefined && obj.length > 0) {
|
||||
html += "<dl class='layui-nav-child'>"
|
||||
for (var j = 0; j < obj.length; j++) {
|
||||
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;
|
||||
}
|
||||
|
|
@ -89,12 +120,13 @@ layui.config({
|
|||
* 监听导航菜单的点击
|
||||
*/
|
||||
element.on("nav(navFilter)", function (elem) {
|
||||
var attrNum = elem.context.attributes.length;
|
||||
if (attrNum == 2) {
|
||||
var path = elem.context.attributes.path;
|
||||
console.log(path);
|
||||
if (path && path.textContent != "") {
|
||||
// var title = elem.context.innerHTML;
|
||||
var title = elem.context.innerText;
|
||||
title = title.substring(title.indexOf(" "), title.length);
|
||||
var path = elem.context.attributes.path.textContent;
|
||||
var path = path.textContent;
|
||||
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