Skip to content

Commit 12d8473

Browse files
karsonzhangkarsonzhang
committed
新增$.fn.refreshAddtabs方法
修复pushState在加载外部网址时的BUG 优化菜单栏折叠计算方法
1 parent b9fe609 commit 12d8473

File tree

1 file changed

+180
-158
lines changed

1 file changed

+180
-158
lines changed

‎jquery.addtabs.js

Lines changed: 180 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,217 @@
11
/**
22
* http://git.oschina.net/hbbcs/bootStrap-addTabs
33
* Created by joe on 2015-12-19.
4+
* Modified by Karson
45
*/
5-
$.fn.addtabs = function (options) {
6-
var obj = $(this);
7-
options = $.extend({
8-
content: '', //直接指定所有页面TABS内容
9-
close: true, //是否可以关闭
10-
monitor: 'body', //监视的区域
11-
nav: '.nav-addtabs',
12-
tab: '.tab-addtabs',
13-
iframeUse: true, //使用iframe还是ajax
14-
iframeHeight: $(window).height() - 50, //固定TAB中IFRAME高度,根据需要自己修改
15-
iframeForceRefresh: false, //点击后强制刷新对应的iframe
16-
callback: function () {
17-
//关闭后回调函数
18-
}
19-
}, options || {});
20-
var navobj = $(options.nav);
21-
var tabobj = $(options.tab);
22-
if (history.pushState) {
23-
//浏览器前进后退事件
24-
$(window).on("popstate", function (e) {
25-
var state = e.originalEvent.state;
26-
if (state) {
27-
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
28-
}
29-
});
30-
}
31-
$(options.monitor).on('click', '[addtabs]', function (e) {
32-
if ($(this).attr('url').indexOf("javascript:") !== 0) {
33-
if ($(this).is("a")) {
34-
e.preventDefault();
35-
}
36-
var id = $(this).attr('addtabs');
37-
var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text());
38-
var url = $(this).attr('url');
39-
var content = options.content ? options.content : $(this).attr('content');
40-
var ajax = $(this).attr('ajax') ? true : false;
41-
var state = ({
42-
url: url, title: title, id: id, content: content, ajax: ajax
43-
});
446

45-
document.title = title;
46-
if (history.pushState && !$(this).data("pushstate")) {
47-
var pushurl = url.indexOf("ref=addtabs") == -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url;
48-
window.history.pushState(state, title, pushurl);
7+
(function ($) {
8+
9+
$.fn.addtabs = function (options) {
10+
var obj = $(this);
11+
options = $.extend({
12+
content: '', //直接指定所有页面TABS内容
13+
close: true, //是否可以关闭
14+
monitor: 'body', //监视的区域
15+
nav: '.nav-addtabs',
16+
tab: '.tab-addtabs',
17+
iframeUse: true, //使用iframe还是ajax
18+
iframeHeight: $(window).height() - 50, //固定TAB中IFRAME高度,根据需要自己修改
19+
iframeForceRefresh: false, //点击后强制刷新对应的iframe
20+
callback: function () {
21+
//关闭后回调函数
4922
}
50-
$(this).data("pushstate", null);
51-
_add.call(this, {
52-
id: id,
53-
title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
54-
content: content,
55-
url: url,
56-
ajax: ajax
23+
}, options || {});
24+
var navobj = $(options.nav);
25+
var tabobj = $(options.tab);
26+
if (history.pushState) {
27+
//浏览器前进后退事件
28+
$(window).on("popstate", function (e) {
29+
var state = e.originalEvent.state;
30+
if (state) {
31+
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
32+
}
5733
});
5834
}
59-
});
60-
61-
navobj.on('click', '.close-tab', function (e) {
62-
id = $(this).prev("a").attr("aria-controls");
63-
_close(id);
64-
return false;
65-
});
66-
navobj.on('dblclick', 'li[role=presentation]', function (e) {
67-
$(this).find(".close-tab").trigger("click");
68-
});
69-
navobj.on('click', 'li[role=presentation]', function (e) {
70-
$("a[addtabs=" + $("a", this).attr("node-id") + "]").trigger("click");
71-
});
35+
$(options.monitor).on('click', '[addtabs]', function (e) {
36+
if ($(this).attr('url').indexOf("javascript:") !== 0) {
37+
if ($(this).is("a")) {
38+
e.preventDefault();
39+
}
40+
var id = $(this).attr('addtabs');
41+
var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text());
42+
var url = $(this).attr('url');
43+
var content = options.content ? options.content : $(this).attr('content');
44+
var ajax = $(this).attr('ajax') ? true : false;
45+
var state = ({
46+
url: url, title: title, id: id, content: content, ajax: ajax
47+
});
7248

73-
$(window).resize(function () {
74-
$("#nav").width($("#header > .navbar").width() - $(".sidebar-toggle").outerWidth() - $(".navbar-custom-menu").outerWidth() - 20);
75-
_drop();
76-
});
49+
document.title = title;
50+
if (history.pushState && !$(this).data("pushstate")) {
51+
var pushurl = url.indexOf("ref=addtabs") == -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url;
52+
try {
53+
window.history.pushState(state, title, pushurl);
54+
} catch (e) {
7755

78-
_add = function (opts) {
79-
var id, tabid, conid, url;
80-
id = opts.id;
81-
tabid = 'tab_' + opts.id;
82-
conid = 'con_' + opts.id;
83-
url = opts.url;
84-
url += (opts.url.indexOf("?") > -1 ? "&addtabs=1" : "?addtabs=1");
85-
navobj.find("[role='presentation']").removeClass('active');
86-
tabobj.find("[role='tabpanel']").removeClass('active');
87-
//如果TAB不存在，创建一个新的TAB
88-
if ($("#" + tabid).size() == 0) {
89-
//创建新TAB的title
90-
title = $('<li role="presentation" id="' + tabid + '"><a href="#' + conid + '" node-id="' + opts.id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + opts.title + '</a></li>');
91-
//是否允许关闭
92-
if (options.close && $("li", navobj).size() > 0) {
93-
title.append(' <i class="close-tab fa fa-remove"></i>');
94-
}
95-
//创建新TAB的内容
96-
content = $('<div role="tabpanel" class="tab-pane" id="' + conid + '"></div>');
97-
//是否指定TAB内容
98-
if (opts.content) {
99-
content.append(opts.content);
100-
} else if (options.iframeUse && !opts.ajax) {//没有内容，使用IFRAME打开链接
101-
var height = options.iframeHeight;
102-
content.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>');
103-
} else {
104-
$.get(url, function (data) {
105-
content.append(data);
56+
}
57+
}
58+
$(this).data("pushstate", null);
59+
_add.call(this, {
60+
id: id,
61+
title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
62+
content: content,
63+
url: url,
64+
ajax: ajax
10665
});
10766
}
108-
//加入TABS
109-
if ($('.tabdrop li').size() > 0) {
110-
$('.tabdrop ul').append(title);
111-
} else {
112-
navobj.append(title);
113-
}
114-
tabobj.append(content);
115-
} else {
116-
//强制刷新iframe
117-
if (options.iframeForceRefresh) {
118-
$("#" + conid + " iframe").attr('src', function (i, val) {
119-
return val;
67+
});
68+
69+
navobj.on('click', '.close-tab', function (e) {
70+
id = $(this).prev("a").attr("aria-controls");
71+
_close(id);
72+
return false;
73+
});
74+
navobj.on('dblclick', 'li[role=presentation]', function (e) {
75+
$(this).find(".close-tab").trigger("click");
76+
});
77+
navobj.on('click', 'li[role=presentation]', function (e) {
78+
$("a[addtabs=" + $("a", this).attr("node-id") + "]").trigger("click");
79+
});
80+
81+
$(window).resize(function () {
82+
if (typeof options.nav == 'object') {
83+
var siblingsWidth = 0;
84+
navobj.siblings().each(function () {
85+
siblingsWidth += $(this).outerWidth();
12086
});
87+
navobj.width(navobj.parent().width() - siblingsWidth);
88+
} else {
89+
$("#nav").width($("#header > .navbar").width() - $(".sidebar-toggle").outerWidth() - $(".navbar-custom-menu").outerWidth() - 20);
12190
}
122-
}
123-
localStorage.setItem("addtabs", $(this).prop('outerHTML'));
124-
//激活TAB
125-
$("#" + tabid).addClass('active');
126-
$("#" + conid).addClass("active");
127-
_drop();
128-
};
91+
_drop();
92+
});
12993

130-
_close = function (id) {
131-
var tabid = 'tab_' + id;
132-
var conid = 'con_' + id;
133-
//如果关闭的是当前激活的TAB，激活他的前一个TAB
134-
if (obj.find("li.active").not('.tabdrop').attr('id') == tabid) {
135-
if ($("#" + tabid).prev().not(".tabdrop").size() > 0) {
136-
$("#" + tabid).prev().not(".tabdrop").find("a").trigger("click");
137-
} else if ($("#" + tabid).next().size() > 0) {
138-
$("#" + tabid).next().trigger("click");
94+
var _add = function (opts) {
95+
var id, tabid, conid, url;
96+
id = opts.id;
97+
tabid = 'tab_' + opts.id;
98+
conid = 'con_' + opts.id;
99+
url = opts.url;
100+
url += (opts.url.indexOf("?") > -1 ? "&addtabs=1" : "?addtabs=1");
101+
navobj.find("[role='presentation']").removeClass('active');
102+
tabobj.find("[role='tabpanel']").removeClass('active');
103+
//如果TAB不存在，创建一个新的TAB
104+
if ($("#" + tabid).size() == 0) {
105+
//创建新TAB的title
106+
title = $('<li role="presentation" id="' + tabid + '"><a href="#' + conid + '" node-id="' + opts.id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + opts.title + '</a></li>');
107+
//是否允许关闭
108+
if (options.close && $("li", navobj).size() > 0) {
109+
title.append(' <i class="close-tab fa fa-remove"></i>');
110+
}
111+
//创建新TAB的内容
112+
content = $('<div role="tabpanel" class="tab-pane" id="' + conid + '"></div>');
113+
//是否指定TAB内容
114+
if (opts.content) {
115+
content.append(opts.content);
116+
} else if (options.iframeUse && !opts.ajax) {//没有内容，使用IFRAME打开链接
117+
var height = options.iframeHeight;
118+
content.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>');
119+
} else {
120+
$.get(url, function (data) {
121+
content.append(data);
122+
});
123+
}
124+
//加入TABS
125+
if ($('.tabdrop li').size() > 0) {
126+
$('.tabdrop ul').append(title);
127+
} else {
128+
navobj.append(title);
129+
}
130+
tabobj.append(content);
139131
} else {
140-
$(">li:last > a", navobj).trigger('click');
132+
//强制刷新iframe
133+
if (options.iframeForceRefresh) {
134+
$("#" + conid + " iframe").attr('src', function (i, val) {
135+
return val;
136+
});
137+
}
141138
}
142-
}
143-
//关闭TAB
144-
$("#" + tabid).remove();
145-
$("#" + conid).remove();
146-
_drop();
147-
options.callback();
148-
};
139+
localStorage.setItem("addtabs", $(this).prop('outerHTML'));
140+
//激活TAB
141+
$("#" + tabid).addClass('active');
142+
$("#" + conid).addClass("active");
143+
_drop();
144+
};
145+
146+
var _close = function (id) {
147+
var tabid = 'tab_' + id;
148+
var conid = 'con_' + id;
149+
//如果关闭的是当前激活的TAB，激活他的前一个TAB
150+
if (obj.find("li.active").not('.tabdrop').attr('id') == tabid) {
151+
if ($("#" + tabid).prev().not(".tabdrop").size() > 0) {
152+
$("#" + tabid).prev().not(".tabdrop").find("a").trigger("click");
153+
} else if ($("#" + tabid).next().size() > 0) {
154+
$("#" + tabid).next().trigger("click");
155+
} else {
156+
$(">li:last > a", navobj).trigger('click');
157+
}
158+
}
159+
//关闭TAB
160+
$("#" + tabid).remove();
161+
$("#" + conid).remove();
162+
_drop();
163+
options.callback();
164+
};
149165

150-
_drop = function () {
151-
//创建下拉标签
152-
var dropdown = $('<li class="dropdown pull-right hide tabdrop"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">' +
166+
var _drop = function () {
167+
navobj.refreshAddtabs();
168+
};
169+
};
170+
//刷新Addtabs
171+
$.fn.refreshAddtabs = function () {
172+
var navobj = $(this);
173+
var dropdown = $(".tabdrop", navobj);
174+
if (dropdown.size() == 0) {
175+
var dropdown = $('<li class="dropdown pull-right hide tabdrop"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">' +
153176
'<i class="glyphicon glyphicon-align-justify"></i>' +
154177
' <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>');
155-
//检测是否已增加
156-
if (!$('.tabdrop').html()) {
157-
dropdown.prependTo(navobj);
158-
} else {
159-
dropdown = navobj.find('.tabdrop');
178+
dropdown.appendTo(navobj);
160179
}
180+
161181
//检测是否有下拉样式
162182
if (navobj.parent().is('.tabs-below')) {
163183
dropdown.addClass('dropup');
164184
}
165-
var collection = 0;
166185

167-
var maxwidth = navobj.width() - 60;
186+
var collection = 0;
187+
var maxwidth = navobj.width() - 65;
168188

169189
var liwidth = 0;
170190
//检查超过一行的标签页
171191
var litabs = navobj.append(dropdown.find('li')).find('>li').not('.tabdrop');
172-
var lisize = litabs.size();
192+
var totalwidth = 0;
173193
litabs.each(function (i, j) {
174-
liwidth += $(this).width();
175-
if (collection == 0 && i == lisize - 1 && liwidth <= navobj.width()) {
176-
return true;
177-
}
178-
if (liwidth > maxwidth) {
179-
dropdown.find('ul').append($(this));
180-
collection++;
181-
}
194+
totalwidth += $(this).outerWidth(true);
182195
});
183-
//如果有超出的，显示下拉标签
184-
if (collection > 0) {
185-
dropdown.removeClass('hide');
186-
if (dropdown.find('.active').length == 1) {
187-
dropdown.addClass('active');
188-
} else {
189-
dropdown.removeClass('active');
196+
if (navobj.width() < totalwidth) {
197+
litabs.each(function (i, j) {
198+
liwidth += $(this).outerWidth(true);
199+
if (liwidth > maxwidth) {
200+
dropdown.find('ul').append($(this));
201+
collection++;
202+
}
203+
});
204+
if (collection > 0) {
205+
dropdown.removeClass('hide');
206+
if (dropdown.find('.active').length == 1) {
207+
dropdown.addClass('active');
208+
} else {
209+
dropdown.removeClass('active');
210+
}
190211
}
191212
} else {
192213
dropdown.addClass('hide');
193214
}
215+
194216
};
195-
};
217+
})(jQuery);

0 commit comments

Comments
 (0)