From ff9b47fde89293ff9519e72c60912a6fa584df2b Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Tue, 30 Apr 2019 22:42:03 +0800
Subject: [PATCH] update use-tab.html

---
 index.html    | 11 ++++++--
 js/okadmin.js | 45 ++++++++++++++++++++++++++++-----
 use-icon.html | 10 ++++++++
 use-tab.html  | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 use-icon.html
 create mode 100644 use-tab.html

diff --git a/index.html b/index.html
index 42625f9..806140d 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
     <!--左侧导航区域-->
     <div class="layui-side layui-bg-black">
         <div class="layui-side-scroll">
-            <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="">
+            <ul class="layui-nav layui-nav-tree">
                 <li class="layui-nav-item layui-nav-itemed">
                     <a class="" href="javascript:;">
                         <i class="iconfont icon-huiyuan"></i> 会员管理
@@ -130,6 +130,14 @@
                         <dd><a href="javascript:;" path="donate.html" tab-id="9-9"><i class="iconfont icon-juanzeng"></i> 捐赠列表</a></dd>
                     </dl>
                 </li>
+                <li class="layui-nav-item">
+                    <a href="javascript:;">
+                        <i class="layui-icon">&#xe716;</i> 框架使用
+                    </a>
+                    <dl class="layui-nav-child">
+                        <dd><a href="javascript:;" path="use-tab.html" tab-id="10-1"><i class="iconfont icon-settings"></i> Tab使用</a></dd>
+                    </dl>
+                </li>
             </ul>
         </div>
     </div>
@@ -158,7 +166,6 @@
 <script src="lib/layui/layui.js"></script>
 <script src="lib/nprogress/nprogress.js"></script>
 <script src="js/okadmin.js"></script>
-<script type="text/javascript"></script>
 <!--天气预报插件-->
 <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
 <script>tpwidget("init", {
diff --git a/js/okadmin.js b/js/okadmin.js
index b29b7b0..f2c0305 100644
--- a/js/okadmin.js
+++ b/js/okadmin.js
@@ -1,10 +1,20 @@
-NProgress.start();
-window.onload = function () {
-    NProgress.done();
+// NProgress.start();
+// window.onload = function () {
+//     NProgress.done();
+// }
+
+function addTab() {
+    console.log(self != top)
+    if (self != top) {
+        console.log("在iframe中")
+    } else {
+        console.log("不在iframe中")
+    }
 }
 
+var element;
 layui.use(["element", "layer"], function () {
-    var element = layui.element;
+    element = layui.element;
     var $ = layui.jquery;
     var layer = layui.layer;
 
@@ -13,7 +23,7 @@ layui.use(["element", "layer"], function () {
      */
     var href = location.href;
     if (href.substring(0, 4) != "http") {
-        layer.alert("请先部署到 localhost 下再访问");
+        layer.msg("请先部署到localhost环境下再访问！", {icon: 7, time: 3000, anim: 1});
     }
 
     /**
@@ -21,6 +31,7 @@ layui.use(["element", "layer"], function () {
      * @type {boolean}
      */
     $(".menu-switch").click(function () {
+        addTab();
         if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
             $(".layui-layout-admin .layui-side").animate({left: "-200px"});
             $(".layui-layout-admin .content-body").animate({left: "0px"});
@@ -42,6 +53,28 @@ layui.use(["element", "layer"], function () {
         // var title = $(this).find("a").html();
         var path = $(this).children("a").attr("path");
         var tabId = $(this).children("a").attr("tab-id");
+        tabAdd(title, path, tabId);
+        // if (path != undefined && path != "" && tabId != undefined && tabId != "") {
+        //     // 去重复选项卡
+        //     for (var i = 0; i < $(".ok-frame").length; i++) {
+        //         if ($(".ok-frame").eq(i).attr("tab-id") == tabId) {
+        //             element.tabChange("ok-tab", tabId);
+        //             event.stopPropagation();
+        //             return;
+        //         }
+        //     }
+        //     // 添加选项卡
+        //     element.tabAdd("ok-tab", {
+        //         title: title,
+        //         content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
+        //         id: tabId
+        //     });
+        //     // 切换选项卡
+        //     element.tabChange("ok-tab", tabId);
+        // }
+    });
+
+    function tabAdd(title ,path, tabId) {
         if (path != undefined && path != "" && tabId != undefined && tabId != "") {
             // 去重复选项卡
             for (var i = 0; i < $(".ok-frame").length; i++) {
@@ -60,7 +93,7 @@ layui.use(["element", "layer"], function () {
             // 切换选项卡
             element.tabChange("ok-tab", tabId);
         }
-    });
+    }
 
     /**
      * 修改copyright结束时间
diff --git a/use-icon.html b/use-icon.html
new file mode 100644
index 0000000..4681f45
--- /dev/null
+++ b/use-icon.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>网站配置</title>
+</head>
+<body>
+    <h1>网站配置</h1>
+</body>
+</html>
diff --git a/use-tab.html b/use-tab.html
new file mode 100644
index 0000000..a2c9790
--- /dev/null
+++ b/use-tab.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab使用</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>Tab使用</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">
+        使用方法1：在index.html中添加
+    </blockquote>
+    <pre class="layui-code" lay-title="HTML" lay-encode="true">
+<li class="layui-nav-item">
+    <a class="" href="javascript:;">
+        <i class="iconfont icon-ai-new"></i> XX管理
+    </a>
+    <dl class="layui-nav-child">
+        // tab-id不可和其它菜单重复
+        <dd><a href="javascript:;" path="xx.html" tab-id="xx-1"><i class="iconfont icon-xx"></i> xx列表</a></dd>
+    </dl>
+</li>
+    </pre>
+
+    <!--代码块2-->
+    <blockquote class="layui-elem-quote">
+        使用方法2：用按钮点击打开
+    </blockquote>
+    <pre class="layui-code" lay-title="HTML" lay-encode="true">
+<li class="layui-nav-item">
+    <a class="" href="javascript:;">
+        <i class="iconfont icon-ai-new"></i> XX管理
+    </a>
+    <dl class="layui-nav-child">
+        // tab-id不可和其它菜单重复
+        <dd><a href="javascript:;" path="xx.html" tab-id="xx-1"><i class="iconfont icon-xx"></i> xx列表</a></dd>
+    </dl>
+</li>
+    </pre>
+    <button class="layui-btn" id="addTab">打开一个新的Tab</button>
+</div>
+<!--js逻辑-->
+<script src="lib/layui/layui.js"></script>
+<script src="js/okadmin.js"></script>
+<script>
+    layui.use(["element", "code"], function () {
+        layui.code({about: false});
+        var $ = layui.jquery;
+
+        $("#addTab").click(function () {
+            tabAdd("xx", "", 888)
+        });
+    })
+</script>
+</body>
+</html>