You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
4.9 KiB

<%--
Created by IntelliJ IDEA.
User: 10295
Date: 2018/4/15
Time: 23:25
To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<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)
}
}
function hideMenu(child){
if(child.length>1){
child.find('i').attr('class', classPrefix + 'right');
}
child.each(function(){
$(this).fadeOut();
hideMenu($("."+$(this).attr('id')));
})
}
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);
}
}
}
$(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>
<main class="col-10 bd-content">
</main>
</div>
</html>