优化menuTabs
This commit is contained in:
RuoYi
parent
fa484ec3e1
commit
84397ee181
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -3323,7 +3323,7 @@ nav.page-tabs .page-tabs-content {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.roll-right.J_tabRight {
|
||||
.roll-right.tabRight {
|
||||
right: 140px;
|
||||
}
|
||||
|
||||
|
|
@ -7231,7 +7231,7 @@ body.skin-3 {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.J_menuTab {
|
||||
.menuTab {
|
||||
-webkit-transition: all .3s ease-out 0s;
|
||||
transition: all .3s ease-out 0s;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -88,7 +88,7 @@ $(function() {
|
|||
var marginLeftVal = calSumWidth($(element).prevAll()),
|
||||
marginRightVal = calSumWidth($(element).nextAll());
|
||||
// 可视区域非tab宽度
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
||||
//可视区域tab宽度
|
||||
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
||||
//实际滚动宽度
|
||||
|
|
@ -117,7 +117,7 @@ $(function() {
|
|||
function scrollTabLeft() {
|
||||
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
||||
// 可视区域非tab宽度
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
||||
//可视区域tab宽度
|
||||
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
||||
//实际滚动宽度
|
||||
|
|
@ -125,7 +125,7 @@ $(function() {
|
|||
if ($(".page-tabs-content").width() < visibleWidth) {
|
||||
return false;
|
||||
} else {
|
||||
var tabElement = $(".J_menuTab:first");
|
||||
var tabElement = $(".menuTab:first");
|
||||
var offsetVal = 0;
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
|
|
@ -150,7 +150,7 @@ $(function() {
|
|||
function scrollTabRight() {
|
||||
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
||||
// 可视区域非tab宽度
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
||||
//可视区域tab宽度
|
||||
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
||||
//实际滚动宽度
|
||||
|
|
@ -158,7 +158,7 @@ $(function() {
|
|||
if ($(".page-tabs-content").width() < visibleWidth) {
|
||||
return false;
|
||||
} else {
|
||||
var tabElement = $(".J_menuTab:first");
|
||||
var tabElement = $(".menuTab:first");
|
||||
var offsetVal = 0;
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
|
|
@ -180,7 +180,7 @@ $(function() {
|
|||
}
|
||||
|
||||
//通过遍历给菜单项加上data-index属性
|
||||
$(".J_menuItem").each(function(index) {
|
||||
$(".menuItem").each(function(index) {
|
||||
if (!$(this).attr('data-index')) {
|
||||
$(this).attr('data-index', index);
|
||||
}
|
||||
|
|
@ -195,15 +195,15 @@ $(function() {
|
|||
if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
|
||||
|
||||
// 选项卡菜单已存在
|
||||
$('.J_menuTab').each(function() {
|
||||
$('.menuTab').each(function() {
|
||||
if ($(this).data('id') == dataUrl) {
|
||||
if (!$(this).hasClass('active')) {
|
||||
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
|
||||
$(this).addClass('active').siblings('.menuTab').removeClass('active');
|
||||
scrollToTab(this);
|
||||
// 显示tab对应的内容区
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == dataUrl) {
|
||||
$(this).show().siblings('.J_iframe').hide();
|
||||
$(this).show().siblings('.RuoYi_iframe').hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -215,39 +215,39 @@ $(function() {
|
|||
|
||||
// 选项卡菜单不存在
|
||||
if (flag) {
|
||||
var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
|
||||
$('.J_menuTab').removeClass('active');
|
||||
var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
|
||||
$('.menuTab').removeClass('active');
|
||||
|
||||
// 添加选项卡对应的iframe
|
||||
var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
|
||||
$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
|
||||
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);
|
||||
|
||||
// 添加选项卡
|
||||
$('.J_menuTabs .page-tabs-content').append(str);
|
||||
scrollToTab($('.J_menuTab.active'));
|
||||
$('.menuTabs .page-tabs-content').append(str);
|
||||
scrollToTab($('.menuTab.active'));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$('.J_menuItem').on('click', menuItem);
|
||||
$('.menuItem').on('click', menuItem);
|
||||
|
||||
// 关闭选项卡菜单
|
||||
function closeTab() {
|
||||
var closeTabId = $(this).parents('.J_menuTab').data('id');
|
||||
var currentWidth = $(this).parents('.J_menuTab').width();
|
||||
var closeTabId = $(this).parents('.menuTab').data('id');
|
||||
var currentWidth = $(this).parents('.menuTab').width();
|
||||
|
||||
// 当前元素处于活动状态
|
||||
if ($(this).parents('.J_menuTab').hasClass('active')) {
|
||||
if ($(this).parents('.menuTab').hasClass('active')) {
|
||||
|
||||
// 当前元素后面有同辈元素，使后面的一个元素处于活动状态
|
||||
if ($(this).parents('.J_menuTab').next('.J_menuTab').size()) {
|
||||
if ($(this).parents('.menuTab').next('.menuTab').size()) {
|
||||
|
||||
var activeId = $(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').data('id');
|
||||
$(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').addClass('active');
|
||||
var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
|
||||
$(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');
|
||||
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == activeId) {
|
||||
$(this).show().siblings('.J_iframe').hide();
|
||||
$(this).show().siblings('.RuoYi_iframe').hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -261,10 +261,10 @@ $(function() {
|
|||
}
|
||||
|
||||
// 移除当前选项卡
|
||||
$(this).parents('.J_menuTab').remove();
|
||||
$(this).parents('.menuTab').remove();
|
||||
|
||||
// 移除tab对应的内容区
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == closeTabId) {
|
||||
$(this).remove();
|
||||
return false;
|
||||
|
|
@ -273,21 +273,21 @@ $(function() {
|
|||
}
|
||||
|
||||
// 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
|
||||
if ($(this).parents('.J_menuTab').prev('.J_menuTab').size()) {
|
||||
var activeId = $(this).parents('.J_menuTab').prev('.J_menuTab:last').data('id');
|
||||
$(this).parents('.J_menuTab').prev('.J_menuTab:last').addClass('active');
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
if ($(this).parents('.menuTab').prev('.menuTab').size()) {
|
||||
var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
|
||||
$(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == activeId) {
|
||||
$(this).show().siblings('.J_iframe').hide();
|
||||
$(this).show().siblings('.RuoYi_iframe').hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 移除当前选项卡
|
||||
$(this).parents('.J_menuTab').remove();
|
||||
$(this).parents('.menuTab').remove();
|
||||
|
||||
// 移除tab对应的内容区
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == closeTabId) {
|
||||
$(this).remove();
|
||||
return false;
|
||||
|
|
@ -298,79 +298,84 @@ $(function() {
|
|||
// 当前元素不处于活动状态
|
||||
else {
|
||||
// 移除当前选项卡
|
||||
$(this).parents('.J_menuTab').remove();
|
||||
$(this).parents('.menuTab').remove();
|
||||
|
||||
// 移除相应tab对应的内容区
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == closeTabId) {
|
||||
$(this).remove();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
scrollToTab($('.J_menuTab.active'));
|
||||
scrollToTab($('.menuTab.active'));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$('.J_menuTabs').on('click', '.J_menuTab i', closeTab);
|
||||
$('.menuTabs').on('click', '.menuTab i', closeTab);
|
||||
|
||||
//关闭其他选项卡
|
||||
function closeOtherTabs() {
|
||||
$('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
|
||||
$('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
|
||||
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
|
||||
$(this).remove();
|
||||
});
|
||||
$('.page-tabs-content').css("margin-left", "0");
|
||||
}
|
||||
$('.J_tabCloseOther').on('click', closeOtherTabs);
|
||||
$('.tabCloseOther').on('click', closeOtherTabs);
|
||||
|
||||
//滚动到已激活的选项卡
|
||||
function showActiveTab() {
|
||||
scrollToTab($('.J_menuTab.active'));
|
||||
scrollToTab($('.menuTab.active'));
|
||||
}
|
||||
$('.J_tabShowActive').on('click', showActiveTab);
|
||||
$('.tabShowActive').on('click', showActiveTab);
|
||||
|
||||
// 点击选项卡菜单
|
||||
function activeTab() {
|
||||
if (!$(this).hasClass('active')) {
|
||||
var currentId = $(this).data('id');
|
||||
// 显示tab对应的内容区
|
||||
$('.J_mainContent .J_iframe').each(function() {
|
||||
$('.mainContent .RuoYi_iframe').each(function() {
|
||||
if ($(this).data('id') == currentId) {
|
||||
$(this).show().siblings('.J_iframe').hide();
|
||||
$(this).show().siblings('.RuoYi_iframe').hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
|
||||
$(this).addClass('active').siblings('.menuTab').removeClass('active');
|
||||
scrollToTab(this);
|
||||
}
|
||||
}
|
||||
|
||||
$('.J_menuTabs').on('click', '.J_menuTab', activeTab);
|
||||
$('.menuTabs').on('click', '.menuTab', activeTab);
|
||||
|
||||
//刷新iframe
|
||||
function refreshTab() {
|
||||
var target = $('.J_iframe[data-id="' + $(this).data('id') + '"]');
|
||||
var currentId = $('.page-tabs-content').find('.active').attr('data-id');
|
||||
var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
|
||||
var url = target.attr('src');
|
||||
target.attr('src', url).ready();
|
||||
}
|
||||
|
||||
// 刷新按钮
|
||||
$('.tabReload').on('click', refreshTab);
|
||||
|
||||
$('.J_menuTabs').on('dblclick', '.J_menuTab', refreshTab);
|
||||
$('.menuTabs').on('dblclick', '.menuTab', refreshTab);
|
||||
|
||||
// 左移按扭
|
||||
$('.J_tabLeft').on('click', scrollTabLeft);
|
||||
$('.tabLeft').on('click', scrollTabLeft);
|
||||
|
||||
// 右移按扭
|
||||
$('.J_tabRight').on('click', scrollTabRight);
|
||||
$('.tabRight').on('click', scrollTabRight);
|
||||
|
||||
// 关闭全部
|
||||
$('.J_tabCloseAll').on('click',
|
||||
$('.tabCloseAll').on('click',
|
||||
function() {
|
||||
$('.page-tabs-content').children("[data-id]").not(":first").each(function() {
|
||||
$('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
|
||||
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
|
||||
$(this).remove();
|
||||
});
|
||||
$('.page-tabs-content').children("[data-id]:first").each(function() {
|
||||
$('.J_iframe[data-id="' + $(this).data('id') + '"]').show();
|
||||
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
|
||||
$(this).addClass("active");
|
||||
});
|
||||
$('.page-tabs-content').css("margin-left", "0");
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<li class="active">
|
||||
<a href="index.html"><i class="fa fa-home"></i> <span class="nav-label">主页</span> <span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level">
|
||||
<li class="active"><a class="J_menuItem" th:href="@{/system/main}">了解若依</a></li>
|
||||
<li class="active"><a class="menuItem" th:href="@{/system/main}">了解若依</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li th:each="menu : ${menus}">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</a>
|
||||
<ul class="nav nav-second-level collapse">
|
||||
<li th:each="cmenu : ${menu.children}">
|
||||
<a class="J_menuItem" th:text="${cmenu.menuName}" th:href="${cmenu.url}">二级菜单</a>
|
||||
<a class="menuItem" th:text="${cmenu.menuName}" th:href="${cmenu.url}">二级菜单</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -87,32 +87,31 @@
|
|||
</nav>
|
||||
</div>
|
||||
<div class="row content-tabs">
|
||||
<button class="roll-nav roll-left J_tabLeft">
|
||||
<button class="roll-nav roll-left tabLeft">
|
||||
<i class="fa fa-backward"></i>
|
||||
</button>
|
||||
<nav class="page-tabs J_menuTabs">
|
||||
<nav class="page-tabs menuTabs">
|
||||
<div class="page-tabs-content">
|
||||
<a href="javascript:;" class="active J_menuTab">首页</a>
|
||||
<a href="javascript:;" class="active menuTab">首页</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="roll-nav roll-right J_tabRight">
|
||||
<button class="roll-nav roll-right tabRight">
|
||||
<i class="fa fa-forward"></i>
|
||||
</button>
|
||||
<div class="btn-group roll-nav roll-right">
|
||||
<button class="dropdown J_tabClose" data-toggle="dropdown">
|
||||
关闭操作<span class="caret"></span>
|
||||
页签操作<span class="caret"></span>
|
||||
</button>
|
||||
<ul role="menu" class="dropdown-menu dropdown-menu-right">
|
||||
<li class="J_tabShowActive"><a>定位当前选项卡</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
|
||||
<li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
|
||||
<li class="tabReload"><a>刷新</a></li>
|
||||
<li class="tabCloseAll"><a>全部关闭</a></li>
|
||||
<li class="tabCloseOther"><a>关闭其他</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="/logout" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
|
||||
</div>
|
||||
<div class="row J_mainContent" id="content-main">
|
||||
<iframe class="J_iframe" name="iframe0" width="100%" height="100%"
|
||||
<div class="row mainContent" id="content-main">
|
||||
<iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%"
|
||||
th:src="@{/system/main}" frameborder="0" seamless></iframe>
|
||||
</div>
|
||||
<div class="footer">
|
||||
|
|
|
|||
Loading…
Reference in New Issue