216 lines
7.4 KiB
JavaScript
216 lines
7.4 KiB
JavaScript
;(function($){
|
|
$.extend({
|
|
page : {
|
|
//计算元素集合的总宽度
|
|
calSumWidth: function(elements) {
|
|
var width = 0;
|
|
$(elements).each(function() {
|
|
width += $(this).outerWidth(true);
|
|
});
|
|
return width;
|
|
},
|
|
|
|
// 激活指定选项卡
|
|
setActiveTab: function(element) {
|
|
if (!$(element).hasClass('active')) {
|
|
var currentId = $(element).data('id');
|
|
// 显示tab对应的内容区
|
|
$('.sent_iframe').each(function() {
|
|
if ($(this).data('id') == currentId) {
|
|
$(this).show().siblings('.sent_iframe').hide();
|
|
}
|
|
});
|
|
$(element).addClass('active').siblings('.menuTab').removeClass('active');
|
|
this.scrollToTab(element);
|
|
}
|
|
},
|
|
scrollToTab: function(element){
|
|
var marginLeftVal = this.calSumWidth($(element).prevAll()),
|
|
marginRightVal = this.calSumWidth($(element).nextAll()),
|
|
tabItemVal = this.calSumWidth($('.page-tabs-content .menuTab')),
|
|
visibleWidth = $(".tab-list").outerWidth(true);
|
|
|
|
//实际滚动宽度
|
|
var scrollVal = 0;
|
|
if (tabItemVal < visibleWidth || (tabItemVal > visibleWidth && marginLeftVal < visibleWidth)) {
|
|
scrollVal = 0;
|
|
}else if(tabItemVal > visibleWidth && marginLeftVal > visibleWidth){
|
|
scrollVal = marginLeftVal - visibleWidth + $(element).outerWidth(true);
|
|
}
|
|
$('.page-tabs-content').animate({
|
|
marginLeft: 0 - scrollVal + 'px'
|
|
},
|
|
"fast");
|
|
|
|
$('.page-tab .page-tabs-content a i').click(function(e){
|
|
e.preventDefault();
|
|
$.page.closeMenuItem($(this).parent('a').data('id'));
|
|
})
|
|
|
|
$('.page-tab .page-tabs-content a span').click(function(e){
|
|
e.preventDefault();
|
|
$.page.setActiveTab($(this).parent('a'));
|
|
})
|
|
},
|
|
|
|
scrollToLeft: function(){
|
|
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
|
// 可视区域非tab宽度
|
|
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
|
//可视区域tab宽度
|
|
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
|
//实际滚动宽度
|
|
var scrollVal = 0;
|
|
if (($(".page-tabs-content").width()) < visibleWidth) {
|
|
return false;
|
|
} else {
|
|
var tabElement = $(".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");
|
|
},
|
|
|
|
scrollToRight: function(){
|
|
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
|
// 可视区域非tab宽度
|
|
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
|
//可视区域tab宽度
|
|
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
|
//实际滚动宽度
|
|
var scrollVal = 0;
|
|
if ($(".page-tabs-content").width() < visibleWidth) {
|
|
return false;
|
|
} else {
|
|
var tabElement = $(".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");
|
|
}
|
|
}
|
|
},
|
|
|
|
createMenuItem: function(dataUrl, menuName) {
|
|
if ($(window.parent.document)) {
|
|
var topWindow = $(window.parent.document);
|
|
}else{
|
|
var topWindow = $(window.document);
|
|
}
|
|
var flag = true;
|
|
|
|
// 选项卡菜单已存在
|
|
$('.menuTab', topWindow).each(function() {
|
|
if ($(this).data('id') == dataUrl) {
|
|
if (!$(this).hasClass('active')) {
|
|
$(this).addClass('active').siblings('.menuTab').removeClass('active');
|
|
$('.page-tabs-content').animate({ marginLeft: ""}, "fast");
|
|
// 显示tab对应的内容区
|
|
$('.mainContent .sent_iframe', topWindow).each(function() {
|
|
if ($(this).data('id') == dataUrl) {
|
|
$(this).show().siblings('.sent_iframe').hide();
|
|
return false;
|
|
}
|
|
});
|
|
}else{
|
|
$.page.refreshTab();
|
|
}
|
|
flag = false;
|
|
return false;
|
|
}
|
|
});
|
|
dataIndex = $.common.random(1,100);
|
|
|
|
// 选项卡菜单不存在
|
|
if (flag) {
|
|
var tabHtml = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '" data-panel="' + dataUrl + '"><span>' + menuName + '</span> <i class="fa fa-times-circle"></i></a>';
|
|
$('.menuTab', topWindow).removeClass('active');
|
|
|
|
// 添加选项卡
|
|
$('.page-tab .page-tabs-content', topWindow).append(tabHtml);
|
|
|
|
// 添加选项卡对应的iframe
|
|
var iframeHtml = $('<iframe/>', {
|
|
'class':'sent_iframe',
|
|
'name' : 'iframe_'+dataIndex,
|
|
'width' : '100%',
|
|
'src' : dataUrl,
|
|
'frameborder' : 0,
|
|
'data-id': dataUrl,
|
|
'height':$(window).height() - 148,
|
|
})
|
|
$('.mainContent', topWindow).find('iframe.sent_iframe').hide();
|
|
$('.mainContent', topWindow).append(iframeHtml);
|
|
}
|
|
this.scrollToTab($('.menuTab.active'));
|
|
return false;
|
|
},
|
|
|
|
closeMenuItem: function(dataId){
|
|
if ($(window.parent.document)) {
|
|
var topWindow = $(window.parent.document);
|
|
}else{
|
|
var topWindow = $(window.document);
|
|
}
|
|
if($('.menuTab[data-id="' + dataId + '"]', topWindow).hasClass('home')){
|
|
$.model.msg('首页不能被关闭！');
|
|
return;
|
|
}
|
|
if($.common.isNotEmpty(dataId)){
|
|
if ($('.menuTab[data-id="' + dataId + '"]', topWindow).hasClass('active')) {
|
|
if ($('.menuTab[data-id="' + dataId + '"]', topWindow).next('.menuTab').length > 0) {
|
|
var activeId = $('.menuTab[data-id="' + dataId + '"]', topWindow).next('.menuTab:eq(0)').data('id');
|
|
}else{
|
|
var activeId = $('.menuTab[data-id="' + dataId + '"]', topWindow).prev('.menuTab:last').data('id');
|
|
}
|
|
$('.menuTab', topWindow).removeClass('active');
|
|
$('.mainContent .sent_iframe', topWindow).hide();
|
|
$('.menuTab[data-id="' + activeId + '"]', topWindow).addClass('active');
|
|
$('.mainContent .sent_iframe[data-id="' + activeId + '"]', topWindow).show();
|
|
};
|
|
//window.parent.$.modal.closeLoading();
|
|
// 根据dataId关闭指定选项卡
|
|
$('.menuTab[data-id="' + dataId + '"]', topWindow).remove();
|
|
// 移除相应tab对应的内容区
|
|
$('.mainContent .sent_iframe[data-id="' + dataId + '"]', topWindow).remove();
|
|
return;
|
|
}
|
|
},
|
|
|
|
// 刷新iframe
|
|
refreshTab: function() {
|
|
var currentId = $('.page-tabs-content').find('.active').attr('data-id');
|
|
var target = $('.sent_iframe[data-id="' + currentId + '"]');
|
|
var url = target.attr('src');
|
|
target.attr('src', url).ready();
|
|
}
|
|
}
|
|
})
|
|
|
|
})(jQuery) |