You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
10 KiB
247 lines
10 KiB
1 year ago
|
/**
|
||
|
|
* http://git.oschina.net/hbbcs/bootStrap-addTabs
|
||
|
|
* Created by joe on 2015-12-19.
|
||
|
|
* Modified by FastAdmin
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function ($) {
|
||
|
|
|
||
|
|
$.fn.addtabs = function (options) {
|
||
|
|
var obj = $(this);
|
||
|
|
options = $.extend({
|
||
|
|
content: '', //直接指定所有页面TABS内容
|
||
|
|
close: true, //是否可以关闭
|
||
|
|
monitor: 'body', //监视的区域
|
||
|
|
nav: '.nav-addtabs',
|
||
|
|
tab: '.tab-addtabs',
|
||
|
|
iframeUse: true, //使用iframe还是ajax
|
||
|
|
simple: false, //是否启用简洁模式，简洁模式下将不启用nav和tab
|
||
|
|
iframeHeight: $(window).height() - 50, //固定TAB中IFRAME高度,根据需要自己修改
|
||
|
|
iframeForceRefresh: false, //点击后强制加载对应的iframe
|
||
|
|
iframeForceRefreshTable: false, //点击后强制刷新对应的iframe中的table
|
||
|
|
callback: function () {
|
||
|
|
//关闭后回调函数
|
||
|
|
}
|
||
|
|
}, options || {});
|
||
|
|
var navobj = $(options.nav);
|
||
|
|
var tabobj = $(options.tab);
|
||
|
|
if (history.pushState) {
|
||
|
|
//浏览器前进后退事件
|
||
|
|
$(window).on("popstate", function (e) {
|
||
|
|
var state = e.originalEvent.state;
|
||
|
|
if (state) {
|
||
|
|
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$(options.monitor).on('click', '[addtabs]', function (e) {
|
||
|
|
if ($(this).attr('url').indexOf("javascript:") !== 0) {
|
||
|
|
if ($(this).is("a")) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
var id = $(this).attr('addtabs');
|
||
|
|
var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text());
|
||
|
|
var url = $(this).attr('url');
|
||
|
|
var content = options.content ? options.content : $(this).attr('content');
|
||
|
|
var ajax = $(this).attr('ajax') === '1' || $(this).attr('ajax') === 'true';
|
||
|
|
var state = ({
|
||
|
|
url: url, title: title, id: id, content: content, ajax: ajax
|
||
|
|
});
|
||
|
|
|
||
|
|
document.title = title;
|
||
|
|
if (history.pushState && !$(this).data("pushstate")) {
|
||
|
|
var pushurl = url.indexOf("ref=addtabs") === -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url;
|
||
|
|
try {
|
||
|
|
window.history.pushState(state, title, pushurl);
|
||
|
|
} catch (e) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$(this).data("pushstate", null);
|
||
|
|
_add.call(this, {
|
||
|
|
id: id,
|
||
|
|
title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
|
||
|
|
content: content,
|
||
|
|
url: url,
|
||
|
|
ajax: ajax
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
navobj.on('click', '.close-tab', function () {
|
||
|
|
var id = $(this).prev("a").attr("aria-controls");
|
||
|
|
_close(id);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
navobj.on('dblclick', 'li[role=presentation]', function () {
|
||
|
|
$(this).find(".close-tab").trigger("click");
|
||
|
|
});
|
||
|
|
navobj.on('click', 'li[role=presentation]', function () {
|
||
|
|
$("a[addtabs=" + $("a", this).attr("node-id") + "]").trigger("click");
|
||
|
|
});
|
||
|
|
|
||
|
|
$(window).resize(function () {
|
||
|
|
if (typeof options.nav === 'object') {
|
||
|
|
var siblingsWidth = 0;
|
||
|
|
navobj.siblings().each(function () {
|
||
|
|
siblingsWidth += $(this).outerWidth();
|
||
|
|
});
|
||
|
|
navobj.width(navobj.parent().width() - siblingsWidth);
|
||
|
|
} else {
|
||
|
|
$("#nav").width($("#header").find("> .navbar").width() - $(".sidebar-toggle").outerWidth() - $(".navbar-custom-menu").outerWidth() - 20);
|
||
|
|
}
|
||
|
|
_drop();
|
||
|
|
});
|
||
|
|
|
||
|
|
var _add = function (opts) {
|
||
|
|
var id, tabid, conid, url;
|
||
|
|
id = opts.id;
|
||
|
|
tabid = 'tab_' + opts.id;
|
||
|
|
conid = 'con_' + opts.id;
|
||
|
|
url = opts.url;
|
||
|
|
url += (opts.url.indexOf("?") > -1 ? "&addtabs=1" : "?addtabs=1");
|
||
|
|
|
||
|
|
if (options.simple) {
|
||
|
|
navobj.find("[role='presentation']").remove();
|
||
|
|
tabobj.find("[role='tabpanel']").remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
var tabitem = $('#' + tabid, navobj);
|
||
|
|
var conitem = $('#' + conid, tabobj);
|
||
|
|
|
||
|
|
navobj.find("[role='presentation']").removeClass('active');
|
||
|
|
tabobj.find("[role='tabpanel']").removeClass('active');
|
||
|
|
|
||
|
|
//如果TAB不存在，创建一个新的TAB
|
||
|
|
if (tabitem.length === 0) {
|
||
|
|
//创建新TAB的title
|
||
|
|
tabitem = $('<li role="presentation" id="' + tabid + '"><a href="#' + conid + '" node-id="' + opts.id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + opts.title + '</a></li>');
|
||
|
|
//是否允许关闭
|
||
|
|
if (options.close && $("li", navobj).length > 0) {
|
||
|
|
tabitem.append(' <i class="close-tab fa fa-remove"></i>');
|
||
|
|
}
|
||
|
|
if (conitem.length === 0) {
|
||
|
|
//创建新TAB的内容
|
||
|
|
conitem = $('<div role="tabpanel" class="tab-pane" id="' + conid + '"></div>');
|
||
|
|
//是否指定TAB内容
|
||
|
|
if (opts.content) {
|
||
|
|
conitem.append(opts.content);
|
||
|
|
} else if (options.iframeUse && !opts.ajax) {//没有内容，使用IFRAME打开链接
|
||
|
|
var height = options.iframeHeight;
|
||
|
|
conitem.append('<iframe src="' + url + '" width="100%" height="' + height + '" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling-x="no" scrolling-y="auto" allowtransparency="yes"></iframe></div>');
|
||
|
|
} else {
|
||
|
|
$.get(url, function (data) {
|
||
|
|
conitem.append(data);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
tabobj.append(conitem);
|
||
|
|
}
|
||
|
|
if (!options.simple) {
|
||
|
|
//加入TABS
|
||
|
|
if ($('.tabdrop li', navobj).length > 0) {
|
||
|
|
$('.tabdrop ul', navobj).append(tabitem);
|
||
|
|
} else {
|
||
|
|
navobj.append(tabitem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
//强制刷新iframe
|
||
|
|
if (options.iframeForceRefresh) {
|
||
|
|
$("#" + conid + " iframe").attr('src', function (i, val) {
|
||
|
|
return val;
|
||
|
|
});
|
||
|
|
} else if (options.iframeForceRefreshTable) {
|
||
|
|
try {
|
||
|
|
//检测iframe中是否存在刷新按钮
|
||
|
|
if ($("#" + conid + " iframe").contents().find(".btn-refresh:not([data-force-refresh=false])").length > 0) {
|
||
|
|
$("#" + conid + " iframe")[0].contentWindow.$(".btn-refresh:not([data-force-refresh=false])").trigger("click");
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
sessionStorage.setItem("addtabs", $(this).prop('outerHTML'));
|
||
|
|
//激活TAB
|
||
|
|
tabitem.addClass('active');
|
||
|
|
conitem.addClass("active");
|
||
|
|
_drop();
|
||
|
|
};
|
||
|
|
|
||
|
|
var _close = function (id) {
|
||
|
|
var tabid = 'tab_' + id;
|
||
|
|
var conid = 'con_' + id;
|
||
|
|
var tabitem = $('#' + tabid, navobj);
|
||
|
|
var conitem = $('#' + conid, tabobj);
|
||
|
|
//如果关闭的是当前激活的TAB，激活他的前一个TAB
|
||
|
|
if (obj.find("li.active").not('.tabdrop').attr('id') === tabid) {
|
||
|
|
var prev = tabitem.prev().not(".tabdrop");
|
||
|
|
var next = tabitem.next().not(".tabdrop");
|
||
|
|
if (prev.length > 0) {
|
||
|
|
prev.find('a').trigger("click");
|
||
|
|
} else if (next.length > 0) {
|
||
|
|
next.find('a').trigger("click");
|
||
|
|
} else {
|
||
|
|
$(">li:not(.tabdrop):last > a", navobj).trigger('click');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//关闭TAB
|
||
|
|
tabitem.remove();
|
||
|
|
conitem.remove();
|
||
|
|
_drop();
|
||
|
|
options.callback();
|
||
|
|
};
|
||
|
|
|
||
|
|
var _drop = function () {
|
||
|
|
navobj.refreshAddtabs();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
//刷新Addtabs
|
||
|
|
$.fn.refreshAddtabs = function () {
|
||
|
|
var navobj = $(this);
|
||
|
|
var dropdown = $(".tabdrop", navobj);
|
||
|
|
if (dropdown.length === 0) {
|
||
|
|
dropdown = $('<li class="dropdown pull-right hide tabdrop"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">' +
|
||
|
|
'<i class="glyphicon glyphicon-align-justify"></i>' +
|
||
|
|
' <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>');
|
||
|
|
dropdown.prependTo(navobj);
|
||
|
|
}
|
||
|
|
|
||
|
|
//检测是否有下拉样式
|
||
|
|
if (navobj.parent().is('.tabs-below')) {
|
||
|
|
dropdown.addClass('dropup');
|
||
|
|
}
|
||
|
|
|
||
|
|
var collection = 0;
|
||
|
|
var maxwidth = navobj.width() - 65;
|
||
|
|
|
||
|
|
var liwidth = 0;
|
||
|
|
//检查超过一行的标签页
|
||
|
|
var litabs = navobj.append(dropdown.find('li')).find('>li').not('.tabdrop');
|
||
|
|
var totalwidth = 0;
|
||
|
|
litabs.each(function () {
|
||
|
|
totalwidth += $(this).outerWidth(true);
|
||
|
|
});
|
||
|
|
if (navobj.width() < totalwidth) {
|
||
|
|
litabs.each(function () {
|
||
|
|
liwidth += $(this).outerWidth(true);
|
||
|
|
if (liwidth > maxwidth) {
|
||
|
|
dropdown.find('ul').append($(this));
|
||
|
|
collection++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (collection > 0) {
|
||
|
|
dropdown.removeClass('hide');
|
||
|
|
if (dropdown.find('.active').length === 1) {
|
||
|
|
dropdown.addClass('active');
|
||
|
|
} else {
|
||
|
|
dropdown.removeClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
dropdown.addClass('hide');
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
})(jQuery);
|