root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tab-id自动生成

v1.0
bobi 2019-05-18 16:50:45 +08:00
parent 9220eb9afb
commit 79c45ee16d
8 changed files with 86 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
data/menu.json
View File

@ -2,21 +2,6 @@
"status": 1000,
"msg": "操作成功",
"data": [
{
"title": "后台首页",
"fontFamily": "ok-icon",
"icon": "",
"href": "pages/home.html",
"isClose": false,
"spread": true,
"isCheck": true
},
{
"title": "字体图标",
"icon": "",
"href": "pages/other/okfont.html",
"spread": false
},
{
"title": "图表管理",
"icon": "",

56
index.html
View File

@ -44,15 +44,15 @@
<!--左侧导航区域-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-shrink="all">
<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" tab-id="1-1"><i class="iconfont icon-dianliyonghuzongshu"></i> 用户列表</a></dd>
<dd><a href="javascript:;" path="pages/role/role.html" tab-id="1-2"><i class="iconfont icon-jiaoseguanli"></i> 角色列表</a></dd>
<dd><a href="javascript:;" path="pages/permission/permission.html" tab-id="1-3"><i class="iconfont icon-jiaoseshouquan"></i> 权限列表</a></dd>
<dd><a href="javascript:;" path="pages/user/user.html"><i class="iconfont icon-dianliyonghuzongshu"></i> 用户列表</a></dd>
<dd><a href="javascript:;" path="pages/role/role.html"><i class="iconfont icon-jiaoseguanli"></i> 角色列表</a></dd>
<dd><a href="javascript:;" path="pages/permission/permission.html"><i class="iconfont icon-jiaoseshouquan"></i> 权限列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -60,7 +60,7 @@
<i class="iconfont icon-ai-new"></i> 新闻管理
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/article/article.html" tab-id="2-1"><i class="iconfont icon-wenzhang2"></i> 文章列表</a></dd>
<dd><a href="javascript:;" path="pages/article/article.html"><i class="iconfont icon-wenzhang2"></i> 文章列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -68,7 +68,7 @@
<i class="iconfont icon-liuyan"></i> 留言管理
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/message/message.html" tab-id="3-1"><i class="iconfont icon-liuyan"></i> 留言列表</a></dd>
<dd><a href="javascript:;" path="pages/message/message.html"><i class="iconfont icon-liuyan"></i> 留言列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -76,7 +76,7 @@
<i class="iconfont icon-xiazai"></i> 下载中心
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/download/download.html" tab-id="4-1"><i class="iconfont icon-xiazai"></i> 下载列表</a></dd>
<dd><a href="javascript:;" path="pages/download/download.html"><i class="iconfont icon-xiazai"></i> 下载列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -84,7 +84,7 @@
<i class="iconfont icon-youqinglianjie"></i> 友情链接
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/link/link.html" tab-id="5-1"><i class="iconfont icon-youqinglianjie"></i> 链接列表</a></dd>
<dd><a href="javascript:;" path="pages/link/link.html"><i class="iconfont icon-youqinglianjie"></i> 链接列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -92,7 +92,7 @@
<i class="iconfont icon-weibiaoti35"></i> 产品管理
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/product/product.html" tab-id="6-1"><i class="iconfont icon-weibiaoti35"></i> 产品列表</a></dd>
<dd><a href="javascript:;" path="pages/product/product.html"><i class="iconfont icon-weibiaoti35"></i> 产品列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -100,12 +100,12 @@
<i class="layui-icon">&#xe62c;</i> 图表页面
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/map/map1.html" tab-id="7-1"><i class="iconfont icon-zhuzhuangtu"></i> 柱状图</a></dd>
<dd><a href="javascript:;" path="pages/map/map2.html" tab-id="7-2"><i class="iconfont icon-tubiaozhexiantu"></i> 折线图</a></dd>
<dd><a href="javascript:;" path="pages/map/map3.html" tab-id="7-3"><i class="iconfont icon-tubiaozhexiantu"></i> 折线堆叠图</a></dd>
<dd><a href="javascript:;" path="pages/map/map4.html" tab-id="7-4"><i class="iconfont icon-bingtu"></i> 饼图</a></dd>
<dd><a href="javascript:;" path="pages/map/map5.html" tab-id="7-5"><i class="iconfont icon-huanxingtu"></i> 环形图</a></dd>
<dd><a href="javascript:;" path="pages/map/map6.html" tab-id="7-6"><i class="iconfont icon-huanxingtu"></i> 散布图</a></dd>
<dd><a href="javascript:;" path="pages/map/map1.html"><i class="iconfont icon-zhuzhuangtu"></i> 柱状图</a></dd>
<dd><a href="javascript:;" path="pages/map/map2.html"><i class="iconfont icon-tubiaozhexiantu"></i> 折线图</a></dd>
<dd><a href="javascript:;" path="pages/map/map3.html"><i class="iconfont icon-tubiaozhexiantu"></i> 折线堆叠图</a></dd>
<dd><a href="javascript:;" path="pages/map/map4.html"><i class="iconfont icon-bingtu"></i> 饼图</a></dd>
<dd><a href="javascript:;" path="pages/map/map5.html"><i class="iconfont icon-huanxingtu"></i> 环形图</a></dd>
<dd><a href="javascript:;" path="pages/map/map6.html"><i class="iconfont icon-huanxingtu"></i> 散布图</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -113,9 +113,9 @@
<i class="layui-icon">&#xe716;</i> 系统管理
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/system/system-setting.html" tab-id="9-1"><i class="iconfont icon-peizhi-"></i> 网站配置</a></dd>
<dd><a href="javascript:;" path="pages/system/system-shield.html" tab-id="9-2"><i class="iconfont icon-blacklist"></i> 屏蔽词</a></dd>
<dd><a href="javascript:;" path="pages/system/system-log.html" tab-id="9-3"><i class="iconfont icon-rizhi"></i> 系统日志</a></dd>
<dd><a href="javascript:;" path="pages/system/system-setting.html"><i class="iconfont icon-peizhi-"></i> 网站配置</a></dd>
<dd><a href="javascript:;" path="pages/system/system-shield.html"><i class="iconfont icon-blacklist"></i> 屏蔽词</a></dd>
<dd><a href="javascript:;" path="pages/system/system-log.html"><i class="iconfont icon-rizhi"></i> 系统日志</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -123,11 +123,11 @@
<i class="iconfont icon-shiyongbangzhu1"></i> 框架使用
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/use/use-okTab.html" tab-id="10-1"><i class="iconfont icon-tab"></i> okTab使用</a></dd>
<dd><a href="javascript:;" path="pages/use/use-okLayer.html" tab-id="10-2"><i class="iconfont icon-layer"></i> okLayer使用</a></dd>
<dd><a href="javascript:;" path="pages/use/use-okUtils.html" tab-id="10-3"><i class="iconfont icon-gongju"></i> okUtils使用</a></dd>
<dd><a href="javascript:;" path="https://www.layui.com/doc/element/icon.html" tab-id="10-4"><i class="iconfont icon-font"></i> Layui图标</a></dd>
<dd><a href="javascript:;" path="font/demo_index.html" tab-id="10-6"><i class="iconfont icon-font"></i> Iconfont图标</a></dd>
<dd><a href="javascript:;" path="pages/use/use-okTab.html"><i class="iconfont icon-tab"></i> okTab使用</a></dd>
<dd><a href="javascript:;" path="pages/use/use-okLayer.html"><i class="iconfont icon-layer"></i> okLayer使用</a></dd>
<dd><a href="javascript:;" path="pages/use/use-okUtils.html"><i class="iconfont icon-gongju"></i> okUtils使用</a></dd>
<dd><a href="javascript:;" path="https://www.layui.com/doc/element/icon.html"><i class="iconfont icon-font"></i> Layui图标</a></dd>
<dd><a href="javascript:;" path="font/demo_index.html"><i class="iconfont icon-font"></i> Iconfont图标</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -135,11 +135,11 @@
<i class="iconfont icon-other"></i> 其他页面
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/user/login.html" tab-id="12-1"><i class="iconfont icon-denglu"></i> 登陆页面</a></dd>
<dd><a href="javascript:;" path="pages/other/403.html" tab-id="12-3"><i class="iconfont icon-icon-test2"></i> 403页面</a></dd>
<dd><a href="javascript:;" path="pages/other/404.html" tab-id="12-2"><i class="iconfont icon-icon-test3"></i> 404页面</a></dd>
<dd><a href="javascript:;" path="pages/other/500.html" tab-id="12-4"><i class="iconfont icon-icon-test4"></i> 500页面</a></dd>
<dd><a href="javascript:;" path="pages/other/donate.html" tab-id="12-5"><i class="iconfont icon-juanzeng"></i> 捐赠列表</a></dd>
<dd><a href="javascript:;" path="pages/user/login.html"><i class="iconfont icon-denglu"></i> 登陆页面</a></dd>
<dd><a href="javascript:;" path="pages/other/403.html"><i class="iconfont icon-icon-test2"></i> 403页面</a></dd>
<dd><a href="javascript:;" path="pages/other/404.html"><i class="iconfont icon-icon-test3"></i> 404页面</a></dd>
<dd><a href="javascript:;" path="pages/other/500.html"><i class="iconfont icon-icon-test4"></i> 500页面</a></dd>
<dd><a href="javascript:;" path="pages/other/donate.html"><i class="iconfont icon-juanzeng"></i> 捐赠列表</a></dd>
</dl>
</li>
</ul>

62
js/okadmin.js
View File

@ -4,8 +4,9 @@ layui.config({
okTab: "okTab",
okUtils: "okUtils"
}).use(["element", "layer", "okTab", "okUtils"], function () {
var $ = layui.jquery;
var element = layui.element;
var layer = layui.layer;
var $ = layui.jquery;
var okTab = layui.okTab;
var okUtils = layui.okUtils;
@ -34,40 +35,43 @@ layui.config({
});
// TODO 加载左侧菜单 ！！！！！！！！！！！！
okUtils.ajax("data/menu.json", "get").done(function (response) {
var html = "";
for (var i = 0; i < response.length; i++) {
var d = response[i];
html += "<li class='layui-nav-item'>"
html += "<a href='javascript:;'>"
html += "<i class='iconfont icon-huiyuan'></i> " + response[i].title;
html += "</a>"
if (d.children != undefined && d.children.length > 0) {
html += "<dl class='layui-nav-child'>"
for (var j = 0; j < d.children.length; j++) {
html += "<dd><a href='javascript:;' path='pages/user/user.html' tab-id='1-1'><i class='iconfont icon-dianliyonghuzongshu'></i> " + d.children[j].title + "</a></dd>";
}
html += "</dl>"
}
html += "</li>";
}
// alert(html)
// $(".layui-nav-tree").html(html);
}).fail(function (error) {
console.log(error)
});
// okUtils.ajax("data/menu.json", "get").done(function (response) {
// var html = "";
// for (var i = 0; i < response.length; i++) {
// var d = response[i];
// html += "<li class='layui-nav-item'>"
// html += "<a href='javascript:;'>"
// html += "<i class='iconfont icon-huiyuan'></i> " + response[i].title;
// html += "</a>"
// if (d.children != undefined && d.children.length > 0) {
// html += "<dl class='layui-nav-child'>"
// for (var j = 0; j < d.children.length; j++) {
// html += "<dd><a href='javascript:;' path='pages/user/user.html' tab-id='1-1'><i class='iconfont icon-dianliyonghuzongshu'></i> " + d.children[j].title + "</a></dd>";
// }
// html += "</dl>"
// }
// html += "</li>";
// }
// $(".layui-nav-tree").html(html);
// element.render("nav");
// }).fail(function (error) {
// console.log(error)
// });
/**
* 点击左边菜单在右边添加选项卡
* 监听导航菜单的点击
*/
// element.on("nav(navFilter)", function (elem) {
// var path = elem.context.attributes.path;
// var tabId = elem.context.attributes["tab-id"];
// var text = elem.context.innerText;
// console.log(path, tabId, text)
// });
$(".layui-nav-child").find("dd").click(function () {
// 纯文字
var title = $(this).text();
// 图标+文字
// var title = $(this).find("a").html();
var path = $(this).children("a").attr("path");
var tabId = $(this).children("a").attr("tab-id");
okTab.add(title, path, tabId);
okTab.add(title, path)
});
/**

1
lib/okPlugins/okLayer.js
View File

@ -1,6 +1,5 @@
"use strict";
layui.define(["layer"], function (exports) {
var $ = layui.jquery;
var okLayer = {
/**
* confirm()函数二次封装

15
lib/okPlugins/okTab.js
View File

@ -1,14 +1,17 @@
"use strict";
layui.define(["element"], function (exports) {
layui.define(["element", "okUtils"], function (exports) {
var element = window.top.layui.element;
var okUtils = layui.okUtils;
var $ = layui.jquery;
var okTab = {
add: function (title, path, tabId) {
add: function (title, path) {
// 参数校验
if (!okTab.parameterCheck(title, path, tabId)) {
if (!okTab.parameterCheck(title, path)) {
return false;
}
// 根据path自动生成tabId值
var tabId = okUtils.str.hash(path)
// 去重复选项卡
var okFrame = $(".ok-frame", window.top.document);
for (var i = 0; i < okFrame.length; i++) {
@ -35,7 +38,7 @@ layui.define(["element"], function (exports) {
* @param tabId
* @returns {boolean}
*/
parameterCheck: function (title, path, tabId) {
parameterCheck: function (title, path) {
if (title == undefined || title == "") {
console.error("title未定义")
return false;
@ -44,10 +47,6 @@ layui.define(["element"], function (exports) {
console.error("path未定义")
return false;
}
if (tabId == undefined || tabId == "") {
console.error("tabId未定义")
return false;
}
return true;
}
}

10
lib/okPlugins/okUtils.js
View File

@ -121,6 +121,16 @@ layui.define("layer", function (exports) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
},
str: {
hash: function (value) {
var hash = 1315423911, i, ch;
for (i = value.length - 1; i >= 0; i--) {
ch = value.charCodeAt(i);
hash ^= ((hash << 5) + ch + (hash >> 2));
}
return (hash & 0x7FFFFFFF);
}
}
}

7
pages/use/use-okTab-sub.html
View File

@ -30,9 +30,8 @@
* 添加tab
* @param title 标题
* @param path 路径
* @param tabId tabId必须唯一
*/
okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
okTab.tabAdd("ok-tool", "http://www.xlbweb.cn")
</pre>
<button class="layui-btn" id="addTab1">打开一个新的Tab1</button>
@ -53,11 +52,11 @@ okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
layui.code({about: false});
$("#addTab1").click(function () {
okTab.add("okLayerSub", "pages/use/use-okLayer.html", "12-1");
okTab.add("okLayerSub", "pages/use/use-okLayer.html");
});
$("#addTab2").click(function () {
okTab.add("ok-toolSub", "http://tool.xlbweb.cn", "12-2");
okTab.add("ok-toolSub", "http://tool.xlbweb.cn");
});
})
</script>

13
pages/use/use-okTab.html
View File

@ -60,9 +60,8 @@
* 添加tab
* @param title 标题
* @param path 路径
* @param tabId tabId必须唯一
*/
okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
okTab.tabAdd("ok-tool", "http://www.xlbweb.cn")
</pre>
<button class="layui-btn" id="addTab1">打开一个新的Tab1</button>
@ -86,19 +85,17 @@ okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
layui.code({about: false});
$("#addTab1").click(function () {
okTab.add("okLayer", "pages/use/use-okLayer.html", "11-1");
okTab.add("okLayer", "pages/use/use-okLayer.html");
});
$("#addTab2").click(function () {
okTab.add("ok-tool", "http://tool.xlbweb.cn", "11-2");
okTab.add("ok-tool", "http://tool.xlbweb.cn");
});
$("#addTab3").click(function () {
// 参数漏写
// 参数漏写或为空
// okTab.add("test");
// okTab.add("test", "");
// okTab.add("test", "http://tool.xlbweb.cn");
okTab.add("test", "http://tool.xlbweb.cn", "");
okTab.add("test", "");
});
$("#addTab4").click(function () {