$(function () {
//计算元素集合的总宽度
function calSumWidth(elements) {
var width = 0;
$(elements).each(function () {
width += $(this).outerWidth(true);
});
return width;
}
//滚动到指定选项卡
function scrollToTab(element) {
var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
// 可视区域非tab宽度
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
//可视区域tab宽度
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
//实际滚动宽度
var scrollVal = 0;
var rightOuterWidth = $(element).next().outerWidth(true);
if (rightOuterWidth === 'undefined' || rightOuterWidth === undefined) {
rightOuterWidth = 0;
}
if ($(".page-tabs-content").outerWidth() < visibleWidth) {
scrollVal = 0;
} else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - rightOuterWidth)) {
if ((visibleWidth - rightOuterWidth) > marginRightVal) {
scrollVal = marginLeftVal;
var tabElement = element;
while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
scrollVal -= $(tabElement).prev().outerWidth();
tabElement = $(tabElement).prev();
}
if (scrollVal > 59) {
scrollVal -= 40;
}
}
} else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
}
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
}, "fast");
}
//查看左侧隐藏的选项卡
function scrollTabLeft() {
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
// 可视区域非tab宽度
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
//可视区域tab宽度
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
//实际滚动宽度
var scrollVal = 0;
if ($(".page-tabs-content").width() < visibleWidth) {
return false;
} else {
var tabElement = $(".J_menuTab:first");
var offsetVal = 0;
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {//找到离当前tab最近的元素
offsetVal += $(tabElement).outerWidth(true);
tabElement = $(tabElement).next();
}
offsetVal = 0;
if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
offsetVal += $(tabElement).outerWidth(true);
tabElement = $(tabElement).prev();
}
scrollVal = calSumWidth($(tabElement).prevAll());
}
}
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
}, "fast");
}
//查看右侧隐藏的选项卡
function scrollTabRight() {
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
// 可视区域非tab宽度
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
//可视区域tab宽度
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
//实际滚动宽度
var scrollVal = 0;
if ($(".page-tabs-content").width() < visibleWidth) {
return false;
} else {
var tabElement = $(".J_menuTab:first");
var offsetVal = 0;
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {//找到离当前tab最近的元素
offsetVal += $(tabElement).outerWidth(true);
tabElement = $(tabElement).next();
}
offsetVal = 0;
while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
offsetVal += $(tabElement).outerWidth(true);
tabElement = $(tabElement).next();
}
scrollVal = calSumWidth($(tabElement).prevAll());
if (scrollVal > 0) {
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
}, "fast");
}
}
}
//通过遍历给菜单项加上data-index属性
$(".J_menuItem").each(function (index) {
if (!$(this).attr('data-index')) {
$(this).attr('data-index', index);
}
});
function menuItem() {
// 获取标识数据
var dataUrl = $(this).attr('href'),
dataIndex = $(this).data('index'),
menuTitle = $.trim($(this).data('title')),
menuName = menuTitle.length > 0 ? menuTitle : $.trim($(this).text()),
flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
return false;
}
if (dataUrl == '#') {
return;
}
// 选项卡菜单已存在
$('.J_menuTab').each(function () {
if ($(this).data('id') == dataUrl) {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
scrollToTab(this);
// 显示tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == dataUrl) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
}
flag = false;
return false;
}
});
// 选项卡菜单不存在
if (flag) {
var str = '';
$('.J_menuTab').removeClass('active');
// 添加选项卡对应的iframe
var str1 = '';
$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
// 显示loading提示并关闭菜单
$("body").removeClass('sidebar-open');
var loading = layer.load(2, {
time: 6 * 1000, // 最长等待时间
});
$('.J_mainContent iframe:visible').on('load', function () {
//iframe加载完成后隐藏loading提示
layer.close(loading);
});
// 添加选项卡
$('.J_menuTabs .page-tabs-content').append(str);
scrollToTab($('.J_menuTab.active'));
// 判断如果不开启tag标签页就关闭其他标签页
if (config.tag != true || config.isMobile == true){
closeOtherTabs();
}
}
return false;
}
// 关闭当前的标签
window.closeCurrentConTab = function() {
$('.J_menuTabs .active i').click();
}
// 内页打开新标签
window.openConTab = function(that) {
// 获取标识数据
var dataUrl = that.attr('href'),
dataIndex = that.data('index'),
menuTitle = $.trim(that.data('title')),
menuName = menuTitle.length > 0 ? menuTitle : $.trim(that.text()),
flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;
// 选项卡菜单已存在
$('.J_menuTab').each(function () {
if ($(this).data('id') == dataUrl) {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
scrollToTab(this);
// 显示tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == dataUrl) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
// 重新加载
$(this).trigger('dblclick');
}
flag = false;
return false;
}
});
// 选项卡菜单不存在
if (flag) {
var str = '';
$('.J_menuTab').removeClass('active');
// 添加选项卡对应的iframe
var str1 = '';
$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
$("body").removeClass('sidebar-open');
var loading = layer.load(2, {
time: 10 * 1000, // 最长等待时间
});
$('.J_mainContent iframe:visible').on('load', function () {
// iframe加载完成后隐藏loading提示
layer.close(loading);
});
// 添加选项卡
$('.J_menuTabs .page-tabs-content').append(str);
scrollToTab($('.J_menuTab.active'));
// 判断如果不开启tag标签页就关闭其他标签页
if (config.tag != true || config.isMobile == true){
closeOtherTabs();
}
}
return false;
};
$('.J_menuItem').on('click', menuItem);
// 关闭选项卡菜单
function closeTab() {
var closeTabId = $(this).parents('.J_menuTab').data('id');
var currentWidth = $(this).parents('.J_menuTab').width();
// 当前元素处于活动状态
if ($(this).parents('.J_menuTab').hasClass('active')) {
// 当前元素后面有同辈元素,使后面的一个元素处于活动状态
if ($(this).parents('.J_menuTab').next('.J_menuTab').length) {
var activeId = $(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').data('id');
$(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').addClass('active');
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == activeId) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
if (marginLeftVal < 0) {
$('.page-tabs-content').animate({
marginLeft: (marginLeftVal + currentWidth) + 'px'
}, "fast");
}
// 移除当前选项卡
$(this).parents('.J_menuTab').remove();
// 定位到当前选项卡
$('.J_tabShowActive').on('click', scrollToTab($('.J_menuTab.active')));
// 移除tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
}
});
}
// 当前元素后面没有同辈元素,使当前元素的上一个元素处于活动状态
if ($(this).parents('.J_menuTab').prev('.J_menuTab').length) {
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).data('id') == activeId) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
// 移除当前选项卡
$(this).parents('.J_menuTab').remove();
//滚动到已激活的选项卡
$('.J_tabShowActive').on('click', scrollToTab($('.J_menuTab.active')));
// 移除tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
}
});
}
}
// 当前元素不处于活动状态
else {
// 移除当前选项卡
$(this).parents('.J_menuTab').remove();
// 移除相应tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
}
});
scrollToTab($('.J_menuTab.active'));
}
return false;
}
$('.J_menuTabs').on('click', '.J_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();
$(this).remove();
});
$('.page-tabs-content').css("margin-left", "0");
}
$('.J_tabCloseOther').on('click', closeOtherTabs);
//滚动到已激活的选项卡
function showActiveTab(){
scrollToTab($('.J_menuTab.active'));
}
$('.J_tabShowActive').on('click', showActiveTab);
// 点击选项卡菜单
function activeTab() {
if (!$(this).hasClass('active')) {
var currentId = $(this).data('id');
// 显示tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == currentId) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
scrollToTab(this);
}
}
$('.J_menuTabs').on('click', '.J_menuTab', activeTab);
//刷新iframe
function refreshTab() {
var target = $('.J_iframe[data-id="' + $(this).data('id') + '"]');
var url = target.attr('src');
//显示loading提示
$("body").removeClass('sidebar-open');
var loading = layer.load(2, {
time: 10 * 1000, // 最长等待时间
});
target.attr('src', url).on('load', function () {
//关闭loading提示
layer.close(loading);
});
}
$('.J_menuTabs').on('dblclick', '.J_menuTab', refreshTab);
// 左移按扭
$('.J_tabLeft').on('click', scrollTabLeft);
// 右移按扭
$('.J_tabRight').on('click', scrollTabRight);
// 关闭全部
$('.J_tabCloseAll').on('click', function () {
$('.page-tabs-content').children("[data-id]").not(":first").each(function () {
$('.J_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();
$(this).addClass("active");
});
$('.page-tabs-content').css("margin-left", "0");
});
});