From 64a9fe9129b34246d89db5032c40e5dbb8134c8f Mon Sep 17 00:00:00 2001
From: 10295 <1029559041@qq.com>
Date: Sun, 13 May 2018 14:17:57 +0800
Subject: [PATCH] =?UTF-8?q?bootstrap=E8=8F=9C=E5=8D=95=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/main/webapp/WEB-INF/jsp/index.jsp |  70 ++++++++-
 web/src/main/webapp/WEB-INF/jsp/menu.jsp  | 174 +++++++---------------
 web/src/main/webapp/WEB-INF/jsp/test.jsp  |  23 ++-
 3 files changed, 145 insertions(+), 122 deletions(-)
diff --git a/web/src/main/webapp/WEB-INF/jsp/index.jsp b/web/src/main/webapp/WEB-INF/jsp/index.jsp
index acf61ac..6affd78 100644
--- a/web/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -1,16 +1,80 @@
 <!DOCTYPE html>
 <html lang="en">
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!--输出,条件,迭代标签库-->
-<%@ page pageEncoding="utf-8"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
+<%@ page pageEncoding="utf-8" %>
 <head>
     <c:import url="head.jsp"/>
+    <script>
+
+        $(function () {
+            $("#navSpan").click(function () {
+                prefix = 'fas fa-angle-double-';
+                if ($("#navbarNavDropdown").is(":hidden")) {
+                    $(this).find('i').attr('class', prefix + 'up');
+                    $(this).find('b').text('Close');
+                } else {
+                    $(this).find('i').attr('class', prefix + 'down');
+                    $(this).find('b').text('Open');
+                }
+            });
+
+
+            $("#tabs").on('mouseenter', 'button', function () {
+                $(this).find("i").show();
+            });
+
+            $("#tabs").on('mouseleave', 'button', function () {
+                $(this).find("i").hide();
+            });
+
+            $("#tabs").on('click', 'button', function () {
+                $(this).addClass('active');
+                $(this).siblings().removeClass('active');
+
+            });
+
+            $("#tabs").on('click', 'i', function () {
+                $(this).parent().remove();
+            });
+        });
+    </script>
 </head>
 
 <body>
 
 <div class="container-fluid">
-    <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
 
+    <nav class="navbar navbar-dark bg-info">
+        <button class="btn btn-primary col-1" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
+                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span id="navSpan"><b>Close</b>&nbsp;<i class="fas fa-angle-double-up"></i></span>
+        </button>
+
+        <div class="btn-group" role="group" aria-label="Basic example" id="tabs">
+
+        </div>
+
+        <form class="form-inline">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+
+    </nav>
+    <div class="show" id="navbarNavDropdown">
+        <div class="row">
+
+            <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
+
+
+            <div class="col-10">
+                <!-- 16:9 aspect ratio -->
+                <div class="embed-responsive embed-responsive-16by9">
+                    <iframe id="myIframe" class="embed-responsive-item" src="/test"></iframe>
+                </div>
+            </div>
+        </div>
+
+    </div>
 
 </div>
 
diff --git a/web/src/main/webapp/WEB-INF/jsp/menu.jsp b/web/src/main/webapp/WEB-INF/jsp/menu.jsp
index 1a83141..ffc9ab9 100644
--- a/web/src/main/webapp/WEB-INF/jsp/menu.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/menu.jsp
@@ -9,132 +9,72 @@
 <html lang="en">
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
 <%@ page pageEncoding="utf-8" %>
-<head>
-    <script>
 
-        function showMenu() {
-            var child = $("." + $(this).attr("id"));
-            i = $(this).find('i');
-            classPrefix = 'fas fa-angle-';
-            if (i.attr('class') == classPrefix + 'right') {
-                i.attr('class', classPrefix + 'down');
-                child.fadeIn()
-            }else{
-                i.attr('class', classPrefix + 'right');
-                hideMenu(child)
-            }
+<script>
+    function showMenu() {
+        var child = $("." + $(this).attr("id"));
+        i = $(this).find('i');
+        classPrefix = 'fas fa-angle-';
+        if (i.attr('class') == classPrefix + 'right') {
+            i.attr('class', classPrefix + 'down');
+            child.fadeIn()
+        } else {
+            i.attr('class', classPrefix + 'right');
+            hideMenu(child)
         }
+    }
 
-        function hideMenu(child){
-            if(child.length>1){
-                child.find('i').attr('class', classPrefix + 'right');
-            }
-            child.each(function(){
-                $(this).fadeOut();
-                hideMenu($("."+$(this).attr('id')));
-            })
+    function hideMenu(child) {
+        if (child.length > 1) {
+            child.find('i').attr('class', classPrefix + 'right');
         }
-
-
-        function addMenu(menus, level, id) {
-            for (var menu in menus) {
-                menuId = 'menu' + menus[menu].id;
-                $("#list-tab").append('<a class="list-group-item list-group-item-action" id="' + menuId + '" data-toggle="list">\n' +
-                    '                    ' + menus[menu].menuName + '\n' +
-                    '                </a>');
-                if (level > 0) {
-                    $("#" + menuId).addClass('offset-' + level).addClass('menu' + id);
-                    $("#" + menuId).hide();
-                }
-                if (menus[menu].childMenu.length > 0) {
-                        $("#" + menuId).append('<i class="fas fa-angle-right"></i><span class="badge badge-primary badge-pill offset-8">' + menus[menu].childMenu.length + '</span>').click(showMenu);
-                    addMenu(menus[menu].childMenu, level + 1, menus[menu].id);
-                }
+        child.each(function () {
+            $(this).fadeOut();
+            hideMenu($("." + $(this).attr('id')));
+        })
+    }
+
+
+    function addMenu(menus, level,id) {
+
+        for (var menu in menus) {
+            href = menus[menu].href;
+            menuId='#menu'+menus[menu].id;
+            $("#list-tab").append('<a class="list-group-item list-group-item-action" data-href="'+menus[menu].href+'" data-id="'+menus[menu].id+'" id="' + menuId.substr(1) + '" data-toggle="list">\n' +
+                '                    ' + menus[menu].menuName + '\n' +
+                '                </a>');
+            if (level > 0) {
+                $(menuId).addClass('offset-' + level).addClass('menu' + id);
+                $(menuId).hide();
+            }
+            if (menus[menu].childMenu.length > 0) {
+                $(menuId).append('<i class="fas fa-angle-right"></i><span class="badge badge-primary badge-pill offset-8">' + menus[menu].childMenu.length + '</span>').click(showMenu);
+                addMenu(menus[menu].childMenu, level + 1, menus[menu].id);
+            } else {
+                $(menuId).click(function () {
+                    btnId='#btn'+$(this).data('id');
+                    if ($(btnId).length == 0) {
+                        $("#tabs").append('<button type="button" id="' + btnId.substr(1) + '" class="btn btn-secondary btn-lg">' + $(this).text() + '\n' +
+                            '            <i class="fas fa-times" style="display: none"></i>\n' +
+                            '        </button>')
+                    }
+
+                    $(top.document).find('.navbar>' + btnId).click();
+                    $(top.document).find('#myIframe').attr('src', $(this).data('href'));
+                });
             }
-
-
         }
+    }
 
-        $(function () {
-
-            addMenu(${menus}.data, 0);
-
-            $("#side-menu>li>a").click(function () {
-                menu_id = $(this).data("id");
-                menu_href = $(this).data("href");
-                menu_name = $(this).data("name");
-
-                if ($("#" + menu_id).length == 0) {
-                    $("#chooseTab").append("<button class=\"btn btn-outline btn-default\">\n" +
-                        "                        <a class=\"dropdown-toggle\" data-id=\"" + menu_id + "\">\n" +
-                        "                            <b>" + menu_name + "</b><i class=\"glyphicon glyphicon-remove\"></i>\n" +
-                        "                        </a>\n" +
-                        "                    </button>");
-
-                    $("#tab").append("<iframe id=\"" + menu_id + "\" src=\"" + menu_href + "\" width=\"100%\" height=\"100%\" frameborder=\"0\" ></iframe>");
-                }
-                $("a[data-id=" + menu_id + "]>b").click();
-            });
-
-            $("#chooseTab").on("click", "button", function () {
-                ele = $("#" + $(this).find("a").data("id"));
-                ele.show();
-                ele.siblings().hide();
-                $(this).addClass("btn-default");
-                $(this).siblings().removeClass("btn-default");
-            });
-
-            $("#chooseTab").on("click", "i", function () {
-                $("#" + $(this).parent().data("id")).remove();
-                $(this).parents("button").remove();
-            });
-        });
-
-    </script>
-</head>
-
-<nav class="navbar navbar-dark bg-info">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
-            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse">
-        <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" href="#">
-                    主页<i class="fas fa-home"></i>
-                </a>
-            </li>
-
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
-                   aria-haspopup="true" aria-expanded="false">
-                    Dropdown link
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-                    <a class="dropdown-item" href="#">Action</a>
-                    <a class="dropdown-item" href="#">Another action</a>
-                    <a class="dropdown-item" href="#">Something else here</a>
-                </div>
-            </li>
-
-
-        </ul>
-    </div>
-</nav>
-
-
-<div class="row flex-xl-nowrap show" id="navbarNavDropdown">
-    <div class="col-2 bd-sidebar">
-        <div class="list-group" id="list-tab" role="tablist">
-
-        </div>
-
-    </div>
+    $(function () {
+        addMenu(${menus}.data, 0
+    )
+        ;
+    });
+</script>
 
-    <main class="col-10 bd-content">
+<div class="list-group col-2 float-left" id="list-tab" role="tablist">
 
-    </main>
 </div>
 
 
diff --git a/web/src/main/webapp/WEB-INF/jsp/test.jsp b/web/src/main/webapp/WEB-INF/jsp/test.jsp
index 31117bc..8286325 100644
--- a/web/src/main/webapp/WEB-INF/jsp/test.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/test.jsp
@@ -13,8 +13,27 @@
     <c:import url="head.jsp"/>
 </head>
 <body>
-    <div id="panel panel-default">
-        <h1>test.jsp</h1>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm">
+            One of three columns
+        </div>
+        <div class="col-sm">
+            One of three columns
+        </div>
+        <div class="col-sm">
+            One of three columns
+        </div>
+        <div class="col-sm">
+            One of three columns
+        </div>
+        <div class="col-sm">
+            One of three columns
+        </div>
+        <div class="col-sm">
+            One of three columns
+        </div>
     </div>
+</div>
 </body>
 </html>
