From 79c45ee16df2f36a1fbbfd56a277c2800f4d7940 Mon Sep 17 00:00:00 2001 From: bobi Date: Sat, 18 May 2019 16:50:45 +0800 Subject: [PATCH] =?UTF-8?q?tab-id=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/menu.json | 15 --------- index.html | 56 ++++++++++++++++---------------- js/okadmin.js | 62 +++++++++++++++++++----------------- lib/okPlugins/okLayer.js | 1 - lib/okPlugins/okTab.js | 15 ++++----- lib/okPlugins/okUtils.js | 10 ++++++ pages/use/use-okTab-sub.html | 7 ++-- pages/use/use-okTab.html | 13 +++----- 8 files changed, 86 insertions(+), 93 deletions(-) diff --git a/data/menu.json b/data/menu.json index a088f2e..b5148e6 100644 --- a/data/menu.json +++ b/data/menu.json @@ -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": "", diff --git a/index.html b/index.html index 3541072..31474c1 100644 --- a/index.html +++ b/index.html @@ -44,15 +44,15 @@
-
    + diff --git a/js/okadmin.js b/js/okadmin.js index 279bcd5..3b351fa 100644 --- a/js/okadmin.js +++ b/js/okadmin.js @@ -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 += "
  • " - html += "" - html += " " + response[i].title; - html += "" - if (d.children != undefined && d.children.length > 0) { - html += "
    " - for (var j = 0; j < d.children.length; j++) { - html += "
    " + d.children[j].title + "
    "; - } - html += "
    " - } - html += "
    • "; - } - // 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 += "
  • " + // html += "" + // html += " " + response[i].title; + // html += "" + // if (d.children != undefined && d.children.length > 0) { + // html += "
    " + // for (var j = 0; j < d.children.length; j++) { + // html += "
    " + d.children[j].title + "
    "; + // } + // html += "
    " + // } + // html += "
    • "; + // } + // $(".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) }); /** diff --git a/lib/okPlugins/okLayer.js b/lib/okPlugins/okLayer.js index e4e67fa..a4645b6 100644 --- a/lib/okPlugins/okLayer.js +++ b/lib/okPlugins/okLayer.js @@ -1,6 +1,5 @@ "use strict"; layui.define(["layer"], function (exports) { - var $ = layui.jquery; var okLayer = { /** * confirm()函数二次封装 diff --git a/lib/okPlugins/okTab.js b/lib/okPlugins/okTab.js index 201d8b0..f132e5e 100644 --- a/lib/okPlugins/okTab.js +++ b/lib/okPlugins/okTab.js @@ -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; } } diff --git a/lib/okPlugins/okUtils.js b/lib/okPlugins/okUtils.js index 06302df..f6bcf71 100644 --- a/lib/okPlugins/okUtils.js +++ b/lib/okPlugins/okUtils.js @@ -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); + } } } diff --git a/pages/use/use-okTab-sub.html b/pages/use/use-okTab-sub.html index dced76a..4df22be 100644 --- a/pages/use/use-okTab-sub.html +++ b/pages/use/use-okTab-sub.html @@ -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") @@ -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"); }); }) diff --git a/pages/use/use-okTab.html b/pages/use/use-okTab.html index 0989a2b..960292a 100644 --- a/pages/use/use-okTab.html +++ b/pages/use/use-okTab.html @@ -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") @@ -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 () {