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

bootstrap菜单树

Browse Source
master
10295 7 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 () { $("#tabs").on('click', 'button', function () {
$(this).addClass('active'); $(this).addClass('active');
$($(this).attr('href')).addClass('active show');
$($(this).attr('href')).siblings().removeClass('active show')
$(this).siblings().removeClass('active'); $(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 () { $("#tabs").on('click', 'i', function () {
$(this).parent().remove(); button=$(this).parent();
$($(this).parent().attr('href')).remove(); $(button.attr('href')).remove();
if(button.next().length==0){
button.prev().click();
}else{
button.next().click();
}
button.remove();
}); });
}); });
</script> </script>
@ -61,21 +71,13 @@
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary" type="submit">Search</button> <button class="btn btn-primary" type="submit">Search</button>
</form> </form>
</nav> </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"> <div class="row-fluid tab-content" id="nav-tabContent">
<!-- 16:9 aspect ratio --> <!-- 16:9 aspect ratio -->
</div>
</div> </div>

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

@ -9,80 +9,84 @@
<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');
classPrefix = 'fas fa-angle-'; classPrefix = 'fas fa-angle-';
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 () {
$(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) { for (var menu in menus) {
href = menus[menu].href; href = menus[menu].href;
menuId='#menu'+menus[menu].id; 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' + $("#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 { } else {
$(menuId).click(function () { $(menuId).click(function () {
btnId='#btn'+$(this).data('id'); btnId = '#btn' + $(this).data('id');
if ($(btnId).length == 0) { 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' + $("#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' + ' <i class="fas fa-times" style="display: none"></i>\n' +
' </button>') ' </button>')
} }
$(btnId).click(); $(btnId).click();
iframe='#iframe'+$(this).data('id'); iframe = '#iframe' + $(this).data('id');
if ($(iframe).length == 0) { 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' + $(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' + ' <iframe class="embed-responsive-item" src="' + $(this).data('href') + '"></iframe>\n' +
' </div>'); ' </div>');
} }
$(iframe).addClass('active show'); $(iframe).addClass('active show');
$(iframe).siblings().removeClass('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> </div>

Write Preview
Loading…
Cancel
Save