panqihua
/
webcrawler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bootstrap菜单树

Browse Source
master
10295 7 years ago
parent 64bf0d8951
commit 64a9fe9129
3 changed files with 145 additions and 122 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 64
      web/src/main/webapp/WEB-INF/jsp/index.jsp
  2. 108
      web/src/main/webapp/WEB-INF/jsp/menu.jsp
  3. 23
      web/src/main/webapp/WEB-INF/jsp/test.jsp

64
web/src/main/webapp/WEB-INF/jsp/index.jsp
Unescape View File

@ -4,14 +4,78 @@
<%@ 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">
<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>

108
web/src/main/webapp/WEB-INF/jsp/menu.jsp
Unescape View File

@ -9,9 +9,8 @@
<html lang="en">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
<%@ page pageEncoding="utf-8" %>
<head>
<script>
<script>
function showMenu() {
var child = $("." + $(this).attr("id"));
i = $(this).find('i');
@ -37,104 +36,45 @@
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' +
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();
$(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);
$(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();
});
$(function () {
addMenu(${menus}.data, 0
)
;
});
</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">
<div class="list-group col-2 float-left" id="list-tab" role="tablist">
</main>
</div>

23
web/src/main/webapp/WEB-INF/jsp/test.jsp
Unescape View File

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

Write Preview
Loading…
Cancel
Save