You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.2 KiB
134 lines
4.2 KiB
<%--
|
|
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">
|
|
<%@ page pageEncoding="utf-8" %>
|
|
<head>
|
|
<script id="a_tmpl" type="text/x-jquery-tmpl">
|
|
<a href="#" class="list-group-item list-group-item-action list-group-item-success" id="${elementPreifx['menu'].id}{{= id}}" data-id="{{= id}}" data-name="{{= name}}" data-href="{{= href}}"></a>
|
|
|
|
</script>
|
|
|
|
<script id="span_tmpl" type="text/x-jquery-tmpl">
|
|
|
|
{{if length>0}}
|
|
|
|
{{= name}}<span class="badge badge-primary badge-pill">{{= length}}</span><i class="fas fa-angle-right"></i>
|
|
|
|
{{else}}
|
|
|
|
<span class="d-inline-block col-6 text-right">{{= name}}</span><span class="d-inline-block col-6 text-right"><i class="fas fa-adjust"></i></span>
|
|
|
|
{{/if}}
|
|
|
|
|
|
</script>
|
|
|
|
<script id="button_tmpl" type="text/x-jquery-tmpl">
|
|
<button type="button" id="${elementPreifx['button'].id}{{= id}}" class="btn btn-secondary btn-lg" data-id="{{= id}}">
|
|
{{= name}}
|
|
<i class="fas fa-times" style="display: none"></i>
|
|
</button>
|
|
|
|
</script>
|
|
|
|
<script id="iframe_tmpl" type="text/x-jquery-tmpl">
|
|
<div id="${elementPreifx['iframe'].id}{{= id}}" class="tab-pane fade embed-responsive embed-responsive-16by9" >
|
|
<iframe class="embed-responsive-item" src="{{= src}}" ></iframe>
|
|
</div>
|
|
</script>
|
|
|
|
<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) {
|
|
|
|
for (var menu in menus) {
|
|
id = menus[menu].id;
|
|
|
|
menuId = $("#a_tmpl").tmpl({
|
|
'id': id,
|
|
'name': menus[menu].menuName,
|
|
'href': menus[menu].href
|
|
}).appendTo('.list-group');
|
|
|
|
if (menus[menu].menuLevel > 0) {
|
|
menuId.addClass('offset-' + menus[menu].menuLevel).addClass('${elementPreifx['menu'].id}' + menus[menu].parentId);
|
|
menuId.hide();
|
|
}
|
|
|
|
$("#span_tmpl").tmpl({
|
|
'name': menus[menu].menuName,
|
|
'length': menus[menu].childMenu.length
|
|
}).appendTo(menuId);
|
|
if (menus[menu].childMenu.length > 0) {
|
|
menuId.click(showMenu);
|
|
addMenu(menus[menu].childMenu, menus[menu].href);
|
|
} else {
|
|
menuId.click(function () {
|
|
button = $("#button_tmpl").tmpl({'id': $(this).data('id'), 'name': $(this).text()});
|
|
|
|
if ($('#' + button.attr('id')).length === 0) {
|
|
button.appendTo("#tabs");
|
|
}
|
|
|
|
$('#' + button.attr('id')).click();
|
|
|
|
iframe = $("#iframe_tmpl").tmpl({'id':$(this).data('id'),'src':$(this).data('href')});
|
|
if ($('#' + iframe.attr('id')).length === 0) {
|
|
iframe.appendTo('#nav-tabContent');
|
|
|
|
}
|
|
|
|
iframe.addClass('active show');
|
|
iframe.siblings().removeClass('active show');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
$.get('/menu/batch_R',function(json){
|
|
addMenu(json['data']);
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<div class="show" id="navbarNavDropdown">
|
|
<div class="col-2">
|
|
<div class="list-group">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</html>
|
|
|