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. 68
      web/src/main/webapp/WEB-INF/jsp/index.jsp
  2. 122
      web/src/main/webapp/WEB-INF/jsp/menu.jsp
  3. 23
      web/src/main/webapp/WEB-INF/jsp/test.jsp

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

@ -1,17 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!--输出,条件,迭代标签库--> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
<%@ page pageEncoding="utf-8"%> <%@ page pageEncoding="utf-8" %>
<head> <head>
<c:import url="head.jsp"/> <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> </head>
<body> <body>
<div class="container-fluid"> <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> <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> </div>

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

@ -9,9 +9,8 @@
<html lang="en"> <html lang="en">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库--> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
<%@ page pageEncoding="utf-8" %> <%@ page pageEncoding="utf-8" %>
<head>
<script>
<script>
function showMenu() { function showMenu() {
var child = $("." + $(this).attr("id")); var child = $("." + $(this).attr("id"));
i = $(this).find('i'); i = $(this).find('i');
@ -19,122 +18,63 @@
if (i.attr('class') == classPrefix + 'right') { if (i.attr('class') == classPrefix + 'right') {
i.attr('class', classPrefix + 'down'); i.attr('class', classPrefix + 'down');
child.fadeIn() child.fadeIn()
}else{ } else {
i.attr('class', classPrefix + 'right'); i.attr('class', classPrefix + 'right');
hideMenu(child) hideMenu(child)
} }
} }
function hideMenu(child){ function hideMenu(child) {
if(child.length>1){ if (child.length > 1) {
child.find('i').attr('class', classPrefix + 'right'); child.find('i').attr('class', classPrefix + 'right');
} }
child.each(function(){ child.each(function () {
$(this).fadeOut(); $(this).fadeOut();
hideMenu($("."+$(this).attr('id'))); hideMenu($("." + $(this).attr('id')));
}) })
} }
function addMenu(menus, level, id) { function addMenu(menus, level,id) {
for (var menu in menus) { for (var menu in menus) {
menuId = 'menu' + menus[menu].id; href = menus[menu].href;
$("#list-tab").append('<a class="list-group-item list-group-item-action" id="' + menuId + '" data-toggle="list">\n' + 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' + ' ' + menus[menu].menuName + '\n' +
' </a>'); ' </a>');
if (level > 0) { if (level > 0) {
$("#" + menuId).addClass('offset-' + level).addClass('menu' + id); $(menuId).addClass('offset-' + level).addClass('menu' + id);
$("#" + menuId).hide(); $(menuId).hide();
} }
if (menus[menu].childMenu.length > 0) { 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); 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 () { $(function () {
$("#" + $(this).parent().data("id")).remove(); addMenu(${menus}.data, 0
$(this).parents("button").remove(); )
}); ;
}); });
</script>
</script> <div class="list-group col-2 float-left" id="list-tab" role="tablist">
</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> </div>

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

@ -13,8 +13,27 @@
<c:import url="head.jsp"/> <c:import url="head.jsp"/>
</head> </head>
<body> <body>
<div id="panel panel-default"> <div class="container-fluid">
<h1>test.jsp</h1> <div class="row">
<div class="col-sm">
One of three columns
</div> </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> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save