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

bootstrap菜单树

Browse Source
master
10295 6 years ago
parent 221c14d5d3
commit 40b45df555
2 changed files with 83 additions and 77 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. 32
      web/src/main/webapp/WEB-INF/jsp/index.jsp
  2. 128
      web/src/main/webapp/WEB-INF/jsp/menu.jsp

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

@ -28,16 +28,26 @@
});
$("#tabs").on('click', 'button', function () {
$(this).addClass('active');
$($(this).attr('href')).addClass('active show');
$($(this).attr('href')).siblings().removeClass('active show')
$(this).siblings().removeClass('active');
$($(this).attr('href')).addClass('active show');
$($(this).attr('href')).siblings().removeClass('active show');
$("#menu"+$(this).data('id')).addClass('active show');
$("#menu"+$(this).data('id')).siblings().removeClass('active show');
});
$("#tabs").on('click', 'i', function () {
$(this).parent().remove();
$($(this).parent().attr('href')).remove();
button=$(this).parent();
$(button.attr('href')).remove();
if(button.next().length==0){
button.prev().click();
}else{
button.next().click();
}
button.remove();
});
});
</script>
@ -61,21 +71,13 @@
<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">
<div class="col-2">
<c:import url="/menu?firstResult=0&maxResults=0"></c:import>
</div>
</div>
<c:import url="/menu?firstResult=0&maxResults=0"></c:import>
<div class="row-fluid tab-content" id="nav-tabContent">
<!-- 16:9 aspect ratio -->
<div class="row-fluid tab-content" id="nav-tabContent">
<!-- 16:9 aspect ratio -->
</div>
</div>

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

@ -9,80 +9,84 @@
<html lang="en">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!--输出,条件,迭代标签库-->
<%@ page pageEncoding="utf-8" %>
<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)
<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');
function hideMenu(child) {
if (child.length > 1) {
child.find('i').attr('class', classPrefix + 'right');
}
child.each(function () {
$(this).fadeOut();
hideMenu($("." + $(this).attr('id')));
})
}
child.each(function () {
$(this).fadeOut();
hideMenu($("." + $(this).attr('id')));
})
}
function addMenu(menus, level,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" href="#iframe'+$(this).data('id')+'">' + $(this).text() + '\n' +
' <i class="fas fa-times" style="display: none"></i>\n' +
' </button>')
}
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" data-id="'+$(this).data('id')+'" href="#iframe' + $(this).data('id') + '">' + $(this).text() + '\n' +
' <i class="fas fa-times" style="display: none"></i>\n' +
' </button>')
}
$(btnId).click();
$(btnId).click();
iframe='#iframe'+$(this).data('id');
if ($(iframe).length == 0) {
$(top.document).find('#nav-tabContent').append('<div id="' + iframe.substr(1) + '" class="tab-pane fade embed-responsive embed-responsive-16by9" >\n' +
' <iframe class="embed-responsive-item" src="'+$(this).data('href')+'"></iframe>\n' +
' </div>');
}
iframe = '#iframe' + $(this).data('id');
if ($(iframe).length == 0) {
$(top.document).find('#nav-tabContent').append('<div id="' + iframe.substr(1) + '" class="tab-pane fade embed-responsive embed-responsive-16by9" >\n' +
' <iframe class="embed-responsive-item" src="' + $(this).data('href') + '"></iframe>\n' +
' </div>');
}
$(iframe).addClass('active show');
$(iframe).siblings().removeClass('active show');
});
$(iframe).addClass('active show');
$(iframe).siblings().removeClass('active show');
});
}
}
}
}
$(function () {
addMenu(${menus}.data, 0
)
;
});
</script>
<div class="list-group" id="list-tab" role="tablist">
$(function () {
addMenu(${menus}.data, 0
)
;
});
</script>
</head>
<div class="show" id="navbarNavDropdown">
<div class="col-2">
<div class="list-group" id="list-tab" role="tablist">
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save