github
/
RuoYi
mirror of https://gitee.com/y_project/RuoYi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

关闭顶部tab页时，左侧菜单定位到当前显示页

pull/171/MERGE
tys 2020-06-27 22:19:14 +08:00
parent 1b7a735f9c
commit 7bca4fcbc4
2 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ruoyi-admin/src/main/resources/static/ruoyi/index.js
View File

@ -30,12 +30,12 @@ $(function() {
} }
SmoothlyMenu(); SmoothlyMenu();
}); });
$('#side-menu>li').click(function() { $('#side-menu>li').click(function() {
if ($('body').hasClass('canvas-menu mini-navbar')) { if ($('body').hasClass('canvas-menu mini-navbar')) {
NavToggle(); NavToggle();
} }
}); });
$('#side-menu>li li a:not(:has(span))').click(function() { $('#side-menu>li li a:not(:has(span))').click(function() {
if ($(window).width() < 769) { if ($(window).width() < 769) {
@ -71,7 +71,16 @@ $(window).bind("load resize", function() {
} }
} }
}); });
function syncMenuTab(dataId) {
var $dataObj = $('a[href$="' + decodeURI(dataId) + '"]');
if (!$dataObj.hasClass("noactive")) {
$('.nav ul').removeClass("in");
$dataObj.parents("ul").addClass("in")
$dataObj.parents("li").addClass("active").siblings().removeClass("active").find('li').removeClass("active");
$dataObj.parents("ul").css('height', 'auto').height();
$dataObj.click();
}
}
function NavToggle() { function NavToggle() {
$('.navbar-minimalize').trigger('click'); $('.navbar-minimalize').trigger('click');
} }
@ -114,7 +123,7 @@ $(function() {
}); });
return width; return width;
} }
// 激活指定选项卡 // 激活指定选项卡
function setActiveTab(element) { function setActiveTab(element) {
if (!$(element).hasClass('active')) { if (!$(element).hasClass('active')) {
@ -239,7 +248,7 @@ $(function() {
dataIndex = $(this).data('index'), dataIndex = $(this).data('index'),
menuName = $.trim($(this).text()), menuName = $.trim($(this).text()),
flag = true; flag = true;
if (!$('a[href$="' + dataUrl + '"]').hasClass("noactive")) { if (!$('a[href$="' + dataUrl + '"]').hasClass("noactive")) {
$(".nav ul li, .nav li").removeClass("selected"); $(".nav ul li, .nav li").removeClass("selected");
$(this).parent("li").addClass("selected"); $(this).parent("li").addClass("selected");
@ -273,20 +282,20 @@ $(function() {
// 添加选项卡对应的iframe // 添加选项卡对应的iframe
var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>'; var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
$('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1); $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
$.modal.loading("数据加载中，请稍后..."); $.modal.loading("数据加载中，请稍后...");
$('.mainContent iframe:visible').load(function () { $('.mainContent iframe:visible').load(function () {
$.modal.closeLoading(); $.modal.closeLoading();
}); });
// 添加选项卡 // 添加选项卡
$('.menuTabs .page-tabs-content').append(str); $('.menuTabs .page-tabs-content').append(str);
scrollToTab($('.menuTab.active')); scrollToTab($('.menuTab.active'));
} }
return false; return false;
} }
function menuBlank() { function menuBlank() {
// 新窗口打开外网以http://开头，如http://ruoyi.vip // 新窗口打开外网以http://开头，如http://ruoyi.vip
var dataUrl = $(this).attr('href'); var dataUrl = $(this).attr('href');
@ -295,7 +304,7 @@ $(function() {
} }
$('.menuItem').on('click', menuItem); $('.menuItem').on('click', menuItem);
$('.menuBlank').on('click', menuBlank); $('.menuBlank').on('click', menuBlank);
// 关闭选项卡菜单 // 关闭选项卡菜单
@ -360,7 +369,7 @@ $(function() {
return false; return false;
} }
}); });
if($.common.isNotEmpty(panelUrl)){ if($.common.isNotEmpty(panelUrl)){
$('.menuTab[data-id="' + panelUrl + '"]').addClass('active').siblings('.menuTab').removeClass('active'); $('.menuTab[data-id="' + panelUrl + '"]').addClass('active').siblings('.menuTab').removeClass('active');
$('.mainContent .RuoYi_iframe').each(function() { $('.mainContent .RuoYi_iframe').each(function() {
@ -387,9 +396,11 @@ $(function() {
} }
scrollToTab($('.menuTab.active')); scrollToTab($('.menuTab.active'));
setIframeUrl($('.page-tabs-content').find('.active').attr('data-id')); setIframeUrl($('.page-tabs-content').find('.active').attr('data-id'));
syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
return false; return false;
} }
$('.menuTabs').on('click', '.menuTab i', closeTab); $('.menuTabs').on('click', '.menuTab i', closeTab);
//滚动到已激活的选项卡 //滚动到已激活的选项卡
@ -424,19 +435,19 @@ $(function() {
var url = target.attr('src'); var url = target.attr('src');
target.attr('src', url).ready(); target.attr('src', url).ready();
} }
// 页签全屏 // 页签全屏
function fullScreenTab() { function fullScreenTab() {
var currentId = $('.page-tabs-content').find('.active').attr('data-id'); var currentId = $('.page-tabs-content').find('.active').attr('data-id');
var target = $('.RuoYi_iframe[data-id="' + currentId + '"]'); var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
target.fullScreen(true); target.fullScreen(true);
} }
// 关闭当前选项卡 // 关闭当前选项卡
function tabCloseCurrent() { function tabCloseCurrent() {
$('.page-tabs-content').find('.active i').trigger("click"); $('.page-tabs-content').find('.active i').trigger("click");
} }
//关闭其他选项卡 //关闭其他选项卡
function tabCloseOther() { function tabCloseOther() {
$('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() { $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
@ -446,7 +457,7 @@ $(function() {
$('.page-tabs-content').css("margin-left", "0"); $('.page-tabs-content').css("margin-left", "0");
setIframeUrl($('.page-tabs-content').find('.active').attr('data-id')); setIframeUrl($('.page-tabs-content').find('.active').attr('data-id'));
} }
// 关闭全部选项卡 // 关闭全部选项卡
function tabCloseAll() { function tabCloseAll() {
$('.page-tabs-content').children("[data-id]").not(":first").each(function() { $('.page-tabs-content').children("[data-id]").not(":first").each(function() {
@ -460,16 +471,16 @@ $(function() {
$('.page-tabs-content').css("margin-left", "0"); $('.page-tabs-content').css("margin-left", "0");
setIframeUrl($('.page-tabs-content').find('.active').attr('data-id')); setIframeUrl($('.page-tabs-content').find('.active').attr('data-id'));
} }
// 全屏显示 // 全屏显示
$('#fullScreen').on('click', function () { $('#fullScreen').on('click', function () {
$(document).toggleFullScreen(); $(document).toggleFullScreen();
}); });
// 页签刷新按钮 // 页签刷新按钮
$('.tabReload').on('click', refreshTab); $('.tabReload').on('click', refreshTab);
// 页签全屏按钮 // 页签全屏按钮
$('.tabFullScreen').on('click', fullScreenTab); $('.tabFullScreen').on('click', fullScreenTab);
@ -481,33 +492,33 @@ $(function() {
// 右移按扭 // 右移按扭
$('.tabRight').on('click', scrollTabRight); $('.tabRight').on('click', scrollTabRight);
// 关闭当前 // 关闭当前
$('.tabCloseCurrent').on('click', tabCloseCurrent); $('.tabCloseCurrent').on('click', tabCloseCurrent);
// 关闭其他 // 关闭其他
$('.tabCloseOther').on('click', tabCloseOther); $('.tabCloseOther').on('click', tabCloseOther);
// 关闭全部 // 关闭全部
$('.tabCloseAll').on('click', tabCloseAll); $('.tabCloseAll').on('click', tabCloseAll);
// tab全屏显示 // tab全屏显示
$('.tabMaxCurrent').on('click', function () { $('.tabMaxCurrent').on('click', function () {
$('.page-tabs-content').find('.active').trigger("dblclick"); $('.page-tabs-content').find('.active').trigger("dblclick");
}); });
// 关闭全屏 // 关闭全屏
$('#ax_close_max').click(function(){ $('#ax_close_max').click(function(){
$('#content-main').toggleClass('max'); $('#content-main').toggleClass('max');
$('#ax_close_max').hide(); $('#ax_close_max').hide();
}) })
// 双击选项卡全屏显示 // 双击选项卡全屏显示
function activeTabMax() { function activeTabMax() {
$('#content-main').toggleClass('max'); $('#content-main').toggleClass('max');
$('#ax_close_max').show(); $('#ax_close_max').show();
} }
// 设置锚点 // 设置锚点
function setIframeUrl(href) { function setIframeUrl(href) {
if($.common.equals("history", mode)) { if($.common.equals("history", mode)) {
@ -518,20 +529,20 @@ $(function() {
window.location.href = newUrl + "#" + href; window.location.href = newUrl + "#" + href;
} }
} }
$(window).keydown(function(event) { $(window).keydown(function(event) {
if (event.keyCode == 27) { if (event.keyCode == 27) {
$('#content-main').removeClass('max'); $('#content-main').removeClass('max');
$('#ax_close_max').hide(); $('#ax_close_max').hide();
} }
}); });
window.onhashchange = function() { window.onhashchange = function() {
var hash = location.hash; var hash = location.hash;
var url = hash.substring(1, hash.length); var url = hash.substring(1, hash.length);
$('a[href$="' + url + '"]').click(); $('a[href$="' + url + '"]').click();
}; };
// 右键菜单实现 // 右键菜单实现
$.contextMenu({ $.contextMenu({
selector: ".menuTab", selector: ".menuTab",
@ -551,6 +562,7 @@ $(function() {
callback: function(key, opt) { callback: function(key, opt) {
setActiveTab(this); setActiveTab(this);
tabCloseOther(); tabCloseOther();
syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
} }
}, },
"close_left": { "close_left": {
@ -566,6 +578,7 @@ $(function() {
$(this).remove(); $(this).remove();
}); });
$('.page-tabs-content').css("margin-left", "0"); $('.page-tabs-content').css("margin-left", "0");
syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
} }
}, },
"close_right": { "close_right": {
@ -577,6 +590,7 @@ $(function() {
$('.menuTab[data-id="' + $(this).data('id') + '"]').remove(); $('.menuTab[data-id="' + $(this).data('id') + '"]').remove();
$(this).remove(); $(this).remove();
}); });
syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
} }
}, },
"close_all": { "close_all": {
@ -584,6 +598,7 @@ $(function() {
icon: "fa-window-close", icon: "fa-window-close",
callback: function(key, opt) { callback: function(key, opt) {
tabCloseAll(); tabCloseAll();
syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
} }
}, },
"step": "---------", "step": "---------",

21
ruoyi-admin/src/main/resources/templates/index.html
View File

@ -26,14 +26,14 @@
</div> </div>
<a th:href="@{/index}"> <a th:href="@{/index}">
<li class="logo hidden-xs"> <li class="logo hidden-xs">
<span class="logo-lg">RuoYi</span> <span class="logo-lg">RuoYi</span>
</li> </li>
</a> </a>
<div class="sidebar-collapse"> <div class="sidebar-collapse">
<ul class="nav" id="side-menu"> <ul class="nav" id="side-menu">
<li> <li>
<div class="user-panel"> <div class="user-panel">
<a class="menuItem noactive" title="个人中心" th:href="@{/system/user/profile}"> <a class="menuItem noactive" title="个人中心" th:href="@{/system/user/profile}">
<div class="hide" th:text="个人中心"></div> <div class="hide" th:text="个人中心"></div>
<div class="pull-left image"> <div class="pull-left image">
<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image"> <img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image">
@ -52,7 +52,7 @@
<li th:each="menu : ${menus}"> <li th:each="menu : ${menus}">
<a th:class="@{${menu.url != '' && menu.url != '#'} ? ${menu.target}}" th:href="@{${menu.url == ''} ? |#| : ${menu.url}}"> <a th:class="@{${menu.url != '' && menu.url != '#'} ? ${menu.target}}" th:href="@{${menu.url == ''} ? |#| : ${menu.url}}">
<i class="fa fa-bar-chart-o" th:class="${menu.icon}"></i> <i class="fa fa-bar-chart-o" th:class="${menu.icon}"></i>
<span class="nav-label" th:text="${menu.menuName}">一级菜单</span> <span class="nav-label" th:text="${menu.menuName}">一级菜单</span>
<span th:class="${menu.url == '' || menu.url == '#'} ? |fa arrow|"></span> <span th:class="${menu.url == '' || menu.url == '#'} ? |fa arrow|"></span>
</a> </a>
<ul class="nav nav-second-level collapse"> <ul class="nav nav-second-level collapse">
@ -169,7 +169,7 @@
</div> </div>
</nav> </nav>
<!--左侧导航结束--> <!--左侧导航结束-->
<!--右侧部分开始--> <!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1"> <div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom"> <div class="row border-bottom">
@ -225,9 +225,9 @@
</button> </button>
<a href="javascript:void(0);" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a> <a href="javascript:void(0);" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
</div> </div>
<a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a> <a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>
<div class="row mainContent" id="content-main"> <div class="row mainContent" id="content-main">
<iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%" data-id="/system/main" <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%" data-id="/system/main"
th:src="@{/system/main}" frameborder="0" seamless></iframe> th:src="@{/system/main}" frameborder="0" seamless></iframe>
@ -310,14 +310,7 @@ $(function() {
if(isLinkage) { if(isLinkage) {
$(".menuTabs").on("click", ".menuTab", function() { $(".menuTabs").on("click", ".menuTab", function() {
var dataId = $(this).attr("data-id"); var dataId = $(this).attr("data-id");
var $dataObj = $('a[href$="' + decodeURI(dataId) + '"]'); syncMenuTab(dataId);
if (!$dataObj.hasClass("noactive")) {
$('.nav ul').removeClass("in");
$dataObj.parents("ul").addClass("in")
$dataObj.parents("li").addClass("active").siblings().removeClass("active").find('li').removeClass("active");
$dataObj.parents("ul").css('height', 'auto').height();
$dataObj.click();
}
}) })
} }
}); });