482 lines
22 KiB
JavaScript
482 lines
22 KiB
JavaScript
/**
|
||
* nth-tabs
|
||
* author:nethuige
|
||
* version:2.0
|
||
*/
|
||
var App = function() {
|
||
return {
|
||
// To get the correct viewport width based on http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
|
||
getViewPort: function() {
|
||
var e = window,
|
||
a = 'inner';
|
||
if (!('innerWidth' in window)) {
|
||
a = 'client';
|
||
e = document.documentElement || document.body;
|
||
}
|
||
|
||
return {
|
||
width: e[a + 'Width'],
|
||
height: e[a + 'Height']
|
||
};
|
||
}
|
||
}
|
||
}();
|
||
(function ($) {
|
||
|
||
$.fn.nthTabs = function (options) {
|
||
|
||
// 插件中的40为默认左边距
|
||
var nthTabs = this;
|
||
var nthTabsContent = $('.tab-content');
|
||
|
||
/*var content = $('.nth-tabs');
|
||
var available_width = $('.main-header').outerWidth(true) - $('.logo').outerWidth(true)
|
||
- $('.sidebar-toggle').outerWidth(true) - $('.navbar-custom-menu').outerWidth(true);
|
||
content.css('min-width', available_width);
|
||
$(window).resize(function() {
|
||
available_width = $('.main-header').outerWidth(true) - $('.logo').outerWidth(true)
|
||
- $('.sidebar-toggle').outerWidth(true) - $('.navbar-custom-menu').outerWidth(true);
|
||
content.css('min-width', available_width);
|
||
});*/
|
||
var defaults = {
|
||
allowClose: true, // 新建选项卡，是否允许关闭，默认启用
|
||
allowRefresh: true, // 新建选项卡，是否允许刷新，默认启用
|
||
active: true, // 新建选项卡，是否为活动状态，默认启用
|
||
location: true, //新建选项卡，是否自动定位，默认启用
|
||
fadeIn: true, // 新建选项卡，淡入效果，默认启用
|
||
rollWidth: nthTabs.width() - 135 // 可滚动的区域宽度，减去3个操作按钮的宽度
|
||
};
|
||
|
||
var settings = $.extend({}, defaults, options);
|
||
|
||
var handler = [];
|
||
|
||
var frameName = 0;
|
||
|
||
var template =
|
||
'<div class="page-tabs">' +
|
||
'<a href="javascript:;" class="roll-nav roll-nav-left" title="菜单左滑"><span class="iconfont iconbackward"></span></a>' +
|
||
'<div class="content-tabs">' +
|
||
'<div class="content-tabs-container">' +
|
||
'<ul class="nav nav-tabs"></ul>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<a href="javascript:;" class="roll-nav roll-nav-right" title="菜单右滑"><span class="iconfont iconforward"></span></a>' +
|
||
'<a href="javascript:;" class="roll-nav roll-nav-allclose tab-close-all" title="关闭全部"><span class="iconfont iconallclose"></span></a>' +
|
||
/*'<div class="dropdown roll-nav right-nav-list">' +
|
||
'<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" title="功能菜单">' +
|
||
'<span class="tab-down iconfont iconxiala"></span></a>' +
|
||
'<ul class="dropdown-menu">' +
|
||
'<li><a href="javascript:;" class="tab-location">定位当前选项卡</a></li>' +
|
||
'<li><a href="javascript:;" class="tab-close-current">关闭当前选项卡</a></li>' +
|
||
'<li role="separator" class="divider"></li>' +
|
||
'<li><a href="javascript:;" class="tab-close-other">关闭其他选项卡</a></li>' +
|
||
'<li><a href="javascript:;" class="tab-close-all">关闭全部选项卡</a></li>' +
|
||
'<li class="divider"></li>' +
|
||
'<li class="scrollbar-outer tab-list-scrollbar">' +
|
||
'<div class="tab-list-container"><ul class="tab-list"></ul></div>' +
|
||
'</li>' +
|
||
'</ul>' +
|
||
'</div>' +*/
|
||
'</div>' ;
|
||
|
||
// 启用插件
|
||
var run = function(){
|
||
nthTabs.html(template);
|
||
event.onWindowsResize().onTabRefresh().onTabClose().onTabRollLeft().onTabRollRight().onTabList()
|
||
.onTabCloseOpt().onTabCloseAll().onTabCloseOther().onLocationTab().onTabToggle();
|
||
return methods;
|
||
};
|
||
|
||
// 方法列表
|
||
var methods = {
|
||
|
||
// 获取所有tab宽度
|
||
getAllTabWidth: function () {
|
||
var sum_width = 0;
|
||
nthTabs.find('.nav-tabs li').each(function () {
|
||
sum_width += parseFloat($(this).width());
|
||
});
|
||
return sum_width;
|
||
},
|
||
|
||
// 获取左右滑动步值
|
||
getMarginStep: function () {
|
||
return settings.rollWidth / 2;
|
||
},
|
||
|
||
// 获取当前活动状态选项卡ID
|
||
getActiveId: function () {
|
||
return nthTabs.find('.active').find("a").attr("href").replace('#', '');
|
||
},
|
||
|
||
// 获取所有选项卡
|
||
getTabList: function () {
|
||
var tabList = [];
|
||
nthTabs.find('.nav-tabs li a').each(function () {
|
||
tabList.push({id: $(this).attr('href'), title: $(this).children('span').html()});
|
||
});
|
||
return tabList;
|
||
},
|
||
|
||
// 新建单个选项卡
|
||
addTab: function (options) {
|
||
console.log("into "+options.id+","+options.title+","+options.url+"addTab");
|
||
// 调用模块点击日志
|
||
$.post(ext.contextPath + "/fwk/Menunumber/dosave.do", {menuitemid:options.id}, function(data) {
|
||
if (data == 1) {
|
||
console.log(options.id+"模块点击日志保存成功！");
|
||
}else if(data == 0){
|
||
console.log("模块点击日志保存失败！");
|
||
}else{
|
||
console.log("模块点击日志保存失败！");
|
||
}
|
||
},'json');
|
||
|
||
if(this.isExistsTab(options.id)){this.setActTab(options.id);return;}
|
||
// nav-tab
|
||
var tab = [];
|
||
var active = options.active == undefined ? settings.active : options.active;
|
||
var allowClose = options.allowClose == undefined ? settings.allowClose : options.allowClose;
|
||
var allowRefresh = options.allowRefresh == undefined ? settings.allowRefresh : options.allowRefresh;
|
||
var location = options.location == undefined ? settings.location : options.location;
|
||
var fadeIn = options.fadeIn == undefined ? settings.fadeIn : options.fadeIn;
|
||
var url = options.url == undefined ? "" : options.url;
|
||
var windowHeight = $(window).height();
|
||
var minheight = windowHeight-90;
|
||
|
||
tab.push('<li title="' + options.title + '" '+(allowClose ? '' : 'not-allow-close')+'>');
|
||
tab.push('<a href="#' + options.id + '" data-url="' + options.url + '" data-toggle="tab">');
|
||
tab.push('<i class="fa fa-circle tab-icon"></i>');
|
||
tab.push('<span>' + options.title + '</span>');
|
||
allowRefresh ? tab.push('<i class="fa fa-refresh tab-refresh"></i>') : '';
|
||
allowClose ? tab.push('<i class="fa fa-close tab-close"></i>') : '';
|
||
tab.push('</a>');
|
||
tab.push('</li>');
|
||
nthTabs.find(".nav-tabs").append(tab.join(''));
|
||
//tab-content
|
||
var tabContent = [];
|
||
tabContent.push('<div class="tab-pane '+(fadeIn ? 'animation-fade' : '')+'" id="' + options.id +'" '+(allowClose ? '' : 'not-allow-close')+'>');
|
||
if(url.length>0){
|
||
tabContent.push('<iframe frameborder="0" name="iframe-'+frameName+'" class="nth-tabs-frame" style="min-height:'+minheight+'px;"></iframe>');
|
||
frameName++;
|
||
}else{
|
||
tabContent.push('<div class="nth-tabs-content">'+options.content+"</div>");
|
||
}
|
||
tabContent.push('</div>');
|
||
/*//nthTabs.find(".tab-content").append(tabContent.join(''));*/
|
||
nthTabsContent.append(tabContent.join(''));
|
||
active && this.setActTab(options.id);
|
||
location && this.locationTab(options.id);
|
||
//解决iframe初始设置src导致页面刷新两次问题
|
||
$("#"+options.id).find("iframe").attr('src',options.url);
|
||
return this;
|
||
},
|
||
|
||
//新建多个选项卡
|
||
addTabs: function (tabsOptions) {
|
||
for(var index in tabsOptions){
|
||
this.addTab(tabsOptions[index]);
|
||
}
|
||
return this;
|
||
},
|
||
|
||
// 定位选项卡
|
||
locationTab: function (tabId) {
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
var navTabOpt = nthTabs.find("[href='" + tabId + "']"); // 当前所操作选项卡对象
|
||
// 计算存在于当前活动选项卡之前的所有同级选项卡的宽度之和
|
||
var beforeTabsWidth = navTabOpt.parent().width();
|
||
navTabOpt.parent().prevAll().each(function () {
|
||
beforeTabsWidth += $(this).width();
|
||
});
|
||
// 得到选项卡容器对象
|
||
var contentTab = navTabOpt.parent().parent().parent();
|
||
// 情况1：前面同级选项卡宽度之和小于选项卡可视区域的则默认5
|
||
if (beforeTabsWidth <= settings.rollWidth) {
|
||
margin_left_total = 1;
|
||
}
|
||
// 情况2：前面同级选项卡宽度之和大于选项卡可视区域的，则margin为向左偏移整数倍的距离
|
||
else{
|
||
margin_left_total = 1 - Math.floor(beforeTabsWidth / settings.rollWidth) * settings.rollWidth;
|
||
}
|
||
contentTab.css("margin-left", margin_left_total);
|
||
return this;
|
||
},
|
||
|
||
// 删除单个选项卡
|
||
delTab: function (tabId) {
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
var navTabA = nthTabs.find("[href='" + tabId + "']");
|
||
if(navTabA.parent().attr('not-allow-close')!=undefined) return false;
|
||
// 如果关闭的是激活状态的选项卡
|
||
if (navTabA.parent().hasClass('active')) {
|
||
// 激活选项卡，如果后面存在激活后面，否则激活前面
|
||
var activeNavTab = navTabA.parent().next();
|
||
var activeTabContent = $(tabId).next();
|
||
if (activeNavTab.length < 1) {
|
||
activeNavTab = navTabA.parent().prev();
|
||
activeTabContent = $(tabId).prev();
|
||
}
|
||
activeNavTab.addClass('active');
|
||
activeTabContent.addClass('active');
|
||
}
|
||
// 移除旧选项卡
|
||
navTabA.parent().remove();
|
||
$(tabId).remove();
|
||
return this;
|
||
},
|
||
|
||
// 删除其他选项卡
|
||
delOtherTab: function () {
|
||
nthTabs.find(".nav-tabs li").not('[class="active"]').not('[not-allow-close]').remove();
|
||
$(".tab-content div.tab-pane").not('[not-allow-close]').not('[class$="active"]').remove();
|
||
nthTabs.find('.content-tabs-container').css("margin-left", 1); //重置位置
|
||
return this;
|
||
},
|
||
|
||
// 删除全部选项卡
|
||
delAllTab: function () {
|
||
this.delOtherTab();
|
||
this.delTab();
|
||
return this;
|
||
},
|
||
|
||
// 设置活动选项卡
|
||
setActTab: function (tabId) {
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
nthTabs.find('.active').removeClass('active');
|
||
nthTabsContent.find('.active').removeClass('active');
|
||
nthTabs.find("[href='" + tabId + "']").parent().addClass('active');
|
||
$(tabId).addClass('active');
|
||
return this;
|
||
},
|
||
|
||
// 切换选项卡
|
||
toggleTab: function (tabId) {
|
||
this.setActTab(tabId).locationTab(tabId);
|
||
return this;
|
||
},
|
||
// 切换并刷新选项卡
|
||
toggleTabAndRef: function (tabId,url) {
|
||
this.setActTab(tabId).locationTab(tabId);
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
$(tabId).find("iframe").attr('src',url);
|
||
return this;
|
||
},
|
||
// just刷新选项卡
|
||
refTab: function (tabId,url) {
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
$(tabId).find("iframe").attr('src',url);
|
||
if(nthTabs.find("[href='" + tabId + "']").length>0){
|
||
nthTabs.find("[href='" + tabId + "']").attr("data-url",url);
|
||
console.log(nthTabs.find("[href='" + tabId + "']").attr("data-url"));
|
||
}
|
||
return this;
|
||
},
|
||
// 指定选项卡是否存在
|
||
isExistsTab: function (tabId) {
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
return nthTabs.find("[href='" + tabId + "']").length>0;
|
||
},
|
||
|
||
// 选项卡切换事件处理器
|
||
tabToggleHandler: function(func){
|
||
handler["tabToggleHandler"] = func;
|
||
},
|
||
// 选项卡只变更刷新状态
|
||
tabChangeRefSt: function(tabId){
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
//增加Company发生变更状态，变化为true，不变化为false
|
||
var changeCompany = $(tabId).find("iframe").attr('data-changeCompany');
|
||
console.log(changeCompany);
|
||
if(changeCompany==true){
|
||
//Company发生变更状态刷新tab
|
||
$(tabId).find("iframe").attr('data-changeCompany', false);
|
||
}
|
||
},
|
||
// 选项卡变更刷新状态，并刷新
|
||
tabChangeRefStAndRef: function(tabId){
|
||
tabId = tabId == undefined ? methods.getActiveId() : tabId;
|
||
tabId = tabId.indexOf('#') > -1 ? tabId : '#' + tabId;
|
||
//增加Company发生变更状态，变化为true，不变化为false
|
||
var changeCompany = $(tabId).find("iframe").attr('data-changeCompany');
|
||
if(changeCompany=="true"){
|
||
//Company发生变更状态刷新tab
|
||
$(tabId).find("iframe").attr('data-changeCompany', false);
|
||
var url = $(tabId).find("iframe").attr("src");
|
||
$(tabId).find("iframe").attr('src',url);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 事件处理
|
||
var event = {
|
||
|
||
// 窗口变化
|
||
onWindowsResize: function () {
|
||
$(window).resize(function () {
|
||
settings.rollWidth = nthTabs.width() - 120;
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 定位选项卡
|
||
onLocationTab: function () {
|
||
nthTabs.on("click", '.tab-location', function () {
|
||
methods.locationTab();
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 刷新选项卡按钮
|
||
onTabRefresh: function () {
|
||
nthTabs.on("click", '.tab-refresh', function () {
|
||
var tabId = $(this).parent().parent().find("a").attr('href');
|
||
var url = $(this).parent().parent().find("a").attr('data-url');
|
||
methods.toggleTabAndRef(tabId,url);
|
||
methods.tabChangeRefSt(tabId);
|
||
});
|
||
return this;
|
||
},
|
||
// 关闭选项卡按钮
|
||
onTabClose: function () {
|
||
nthTabs.on("click", '.tab-close', function () {
|
||
var tabId = $(this).parent().parent().find("a").attr('href');
|
||
//当前操作的标签宽度
|
||
var navTabOpt = nthTabs.find("[href='" + tabId + "']"); // 当前操作选项卡对象
|
||
// 当前选项卡后有选项卡则不处理，如果无，则整体向左偏移一个选项卡
|
||
if(navTabOpt.parent().next().length == 0){
|
||
// 计算存在于当前操作选项卡之前的所有同级选项卡的宽度之和
|
||
var beforeTabsWidth = 0;
|
||
navTabOpt.parent().prevAll().each(function () {
|
||
beforeTabsWidth += $(this).width();
|
||
});
|
||
//当前操作选项卡的宽度
|
||
var optTabWidth = navTabOpt.parent().width();
|
||
var margin_left_total = 1; // 默认偏移（总宽度未超过滚动区域）
|
||
// 得到选项卡容器对象
|
||
var contentTab = navTabOpt.parent().parent().parent();
|
||
// 满足此情况才需要做整体左偏移处理
|
||
if (beforeTabsWidth > settings.rollWidth) {
|
||
var margin_left_origin = contentTab.css('marginLeft').replace('px', '');
|
||
margin_left_total = parseFloat(margin_left_origin) + optTabWidth + 1;
|
||
}
|
||
contentTab.css("margin-left", margin_left_total);
|
||
}
|
||
methods.delTab(tabId);
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 关闭当前选项卡操作
|
||
onTabCloseOpt: function () {
|
||
nthTabs.on("click", '.tab-close-current', function () {
|
||
methods.delTab();
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 关闭其他选项卡
|
||
onTabCloseOther: function () {
|
||
nthTabs.on("click", '.tab-close-other', function () {
|
||
methods.delOtherTab();
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 关闭全部选项卡
|
||
onTabCloseAll: function () {
|
||
nthTabs.on("click", '.tab-close-all', function () {
|
||
methods.delAllTab();
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 左滑选项卡
|
||
onTabRollLeft: function () {
|
||
nthTabs.on("click", '.roll-nav-left', function () {
|
||
var contentTab = $(this).parent().find('.content-tabs-container');
|
||
var margin_left_total;
|
||
if (methods.getAllTabWidth() <= settings.rollWidth) {
|
||
//未超出可视区域宽度,不可滑动
|
||
margin_left_total = 40;
|
||
}else{
|
||
var margin_left_origin = contentTab.css('marginLeft').replace('px', '');
|
||
margin_left_total = parseFloat(margin_left_origin) + methods.getMarginStep() + 40;
|
||
}
|
||
contentTab.css("margin-left", margin_left_total > 1 ? 1 : margin_left_total);
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 右滑选项卡
|
||
onTabRollRight: function () {
|
||
nthTabs.on("click", '.roll-nav-right', function () {
|
||
if (methods.getAllTabWidth() <= settings.rollWidth) return false; //未超出可视区域宽度,不可滑动
|
||
var contentTab = $(this).parent().find('.content-tabs-container');
|
||
var margin_left_origin = contentTab.css('marginLeft').replace('px', '');
|
||
var margin_left_total = parseFloat(margin_left_origin) - methods.getMarginStep();
|
||
if (methods.getAllTabWidth() - Math.abs(margin_left_origin) <= settings.rollWidth) return false; //已无隐藏无需滚动
|
||
contentTab.css("margin-left", margin_left_total);
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 选项卡清单
|
||
onTabList: function () {
|
||
nthTabs.on("click", '.right-nav-list', function () {
|
||
var tabList = methods.getTabList();
|
||
var html = [];
|
||
$.each(tabList, function (key, val) {
|
||
html.push('<li class="toggle-tab" data-id="' + val.id + '">' + val.title + '</li>');
|
||
});
|
||
nthTabs.find(".tab-list").html(html.join(''));
|
||
});
|
||
nthTabs.find(".tab-list-scrollbar").scrollbar();
|
||
this.onTabListToggle();
|
||
return this;
|
||
},
|
||
|
||
// 清单下切换选项卡
|
||
onTabListToggle: function () {
|
||
nthTabs.on("click", '.toggle-tab', function () {
|
||
var tabId = $(this).data("id");
|
||
methods.setActTab(tabId).locationTab(tabId);
|
||
methods.tabChangeRefStAndRef(tabId);
|
||
});
|
||
// 选项卡清单滚动条点击不关闭
|
||
nthTabs.on('click','.scroll-element',function (e) {
|
||
e.stopPropagation();
|
||
});
|
||
return this;
|
||
},
|
||
|
||
// 选项卡切换事件
|
||
onTabToggle: function(){
|
||
nthTabs.on("click", '.nav-tabs li', function () {
|
||
var lastTabText = nthTabs.find(".nav-tabs li a[href='#"+methods.getActiveId()+"'] span").text();
|
||
handler.hasOwnProperty("tabToggleHandler") && handler["tabToggleHandler"]({
|
||
last:{
|
||
tabId:methods.getActiveId(),
|
||
tabText:lastTabText
|
||
},
|
||
active:{
|
||
tabId:$(this).find("a").attr("href").replace('#',''),
|
||
tabText:$(this).find("a span").text()
|
||
}
|
||
});
|
||
var tabId = $(this).find("a").attr("href");
|
||
methods.tabChangeRefStAndRef(tabId);
|
||
});
|
||
}
|
||
};
|
||
return run();
|
||
}
|
||
})(jQuery); |