|
|
|
<%--
|
|
|
|
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>
|