bodyTab.js
13.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
/*
@Author: 请叫我马哥
@Time: 2017-04
@Tittle: tab
@Description: 点击对应按钮添加新窗口
*/
var tabFilter, menu = [], liIndex, curNav, delMenu, menuData;
layui.define(["element", "jquery"], function (exports) {
var element = layui.element,
$ = layui.jquery,
layId,
Tab = function () {
this.tabConfig = {
closed: true,
openTabNum: undefined, //最大可打开窗口数量
tabFilter: "bodyTab", //添加窗口的filter
url: undefined //获取菜单json地址
};
};
//获取二级菜单数据
Tab.prototype.render = function () {
var url = this.tabConfig.url;
$.get(url, null,
function (data) {
menuData = data;
//显示左侧菜单
if ($(".navBar").html() == '') {
var _this = this;
$(".navBar").html(navBar(data, ""));
element.init(); //初始化页面元素
}
});
};
//加载搜索菜单
Tab.prototype.renderMenu = function (par) {
//console.log("par:", par);
//显示左侧菜单
$(".navBar").html(navBar(menuData, par.value));
element.init(); //初始化页面元素
};
//进入菜单
Tab.prototype.selectedMenu = function () {
//console.log("selectedMenu:");
let obj = document.getElementById('firstMenu');
if (obj != null) {
obj.click();
}
};
//参数设置
Tab.prototype.set = function (option) {
var _this = this;
$.extend(true, _this.tabConfig, option);
return _this;
};
//通过title获取lay-id
Tab.prototype.getLayId = function (title) {
$(".layui-tab-title.top_tab li").each(function () {
if ($(this).find("cite").text() == title) {
layId = $(this).attr("lay-id");
}
});
return layId;
};
//通过title判断tab是否存在
Tab.prototype.hasTab = function (title) {
var tabIndex = -1;
$(".layui-tab-title.top_tab li").each(function () {
if ($(this).find("cite").text() == title) {
tabIndex = 1;
}
});
return tabIndex;
};
//右侧内容tab操作
var tabIdIndex = 0;
Tab.prototype.tabAdd = function (_this) {
if (window.sessionStorage.getItem("menu")) {
menu = JSON.parse(window.sessionStorage.getItem("menu"));
}
var that = this;
var closed = that.tabConfig.closed,
openTabNum = that.tabConfig.openTabNum,
url = _this.attr("data-url"),
tabFilter = that.tabConfig.tabFilter;
if (url.indexOf("_blank")>-1 ) {
//window.location.href = _this.attr("data-url");
window.open(url, _this.attr("id"));
} else {
var title = '';
if (_this.find("i.iconfont,i.layui-icon").attr("data-icon") != undefined) {
if (_this.find("i.iconfont").attr("data-icon") != undefined) {
title += '<i class="iconfont ' + _this.find("i.iconfont").attr("data-icon") + '"></i>';
} else {
title += '<i class="layui-icon">' + _this.find("i.layui-icon").attr("data-icon") + '</i>';
}
}
//已打开的窗口中不存在
if (that.hasTab(_this.find("cite").text()) == -1 && _this.siblings("dl.layui-nav-child").length == 0 && _this.attr("data-url")) {
if ($(".layui-tab-title.top_tab li").length == openTabNum) {
layer.msg('只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
return;
}
tabIdIndex++;
title += '<cite>' + _this.find("cite").text() + '</cite>';
title += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + tabIdIndex + '"></i>';
element.tabAdd(tabFilter, {
title: title,
content: "<iframe src='" + _this.attr("data-url") + "' data-id='" + tabIdIndex + "'></frame>",
id: new Date().getTime()
});
//当前窗口内容
var curmenu = {
"icon": _this.find("i.iconfont").attr("data-icon") != undefined ? _this.find("i.iconfont").attr("data-icon") : _this.find("i.layui-icon").attr("data-icon"),
"title": _this.find("cite").text(),
"href": _this.attr("data-url"),
"layId": new Date().getTime()
};
menu.push(curmenu);
window.sessionStorage.setItem("menu", JSON.stringify(menu)); //打开的窗口
window.sessionStorage.setItem("curmenu", JSON.stringify(curmenu)); //当前的窗口
element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
that.tabMove(); //顶部窗口是否可滚动
} else {
//当前窗口内容
var curmenu = {
"icon": _this.find("i.iconfont").attr("data-icon") != undefined ? _this.find("i.iconfont").attr("data-icon") : _this.find("i.layui-icon").attr("data-icon"),
"title": _this.find("cite").text(),
"href": url
};
window.sessionStorage.setItem("curmenu", JSON.stringify(curmenu)); //当前的窗口
element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
that.tabMove(); //顶部窗口是否可滚动
}
}
};
//顶部窗口移动
Tab.prototype.tabMove = function () {
$(window).on("resize", function () {
var topTabsBox = $("#top_tabs_box"),
topTabsBoxWidth = $("#top_tabs_box").width(),
topTabs = $("#top_tabs"),
topTabsWidth = $("#top_tabs").width(),
tabLi = topTabs.find("li.layui-this"),
top_tabs = document.getElementById("top_tabs");
if (topTabsWidth > topTabsBoxWidth) {
if (tabLi.position().left > topTabsBoxWidth || tabLi.position().left + topTabsBoxWidth > topTabsWidth) {
topTabs.css("left", topTabsBoxWidth - topTabsWidth);
} else {
topTabs.css("left", -tabLi.position().left);
}
//拖动效果
var flag = false;
var cur = {
x: 0,
y: 0
};
var nx, dx, x;
function down() {
flag = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
cur.x = touch.clientX;
dx = top_tabs.offsetLeft;
};
function move() {
var self = this;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
if (flag) {
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
nx = touch.clientX - cur.x;
x = dx + nx;
if (x > 0) {
x = 0;
} else {
if (x < topTabsBoxWidth - topTabsWidth) {
x = topTabsBoxWidth - topTabsWidth;
} else {
x = dx + nx;
}
}
top_tabs.style.left = x + "px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove", function () {
event.preventDefault();
}, false);
}
}
//鼠标释放时候的函数
function end() {
flag = false;
}
//pc端拖动效果
topTabs.on("mousedown", down);
topTabs.on("mousemove", move);
$(document).on("mouseup", end);
//移动端拖动效果
topTabs.on("touchstart", down);
topTabs.on("touchmove", move);
topTabs.on("touchend", end);
} else {
//移除pc端拖动效果
topTabs.off("mousedown", down);
topTabs.off("mousemove", move);
topTabs.off("mouseup", end);
//移除移动端拖动效果
topTabs.off("touchstart", down);
topTabs.off("touchmove", move);
topTabs.off("touchend", end);
topTabs.removeAttr("style");
return false;
}
}).resize();
};
$(document).ready(function () {
window.sessionStorage.setItem("movewith", 0);
});
//向右滑动
$("body").on("click", ".leftBtn li", function () {
$("#top_tabs").css("left", 20);
window.sessionStorage.setItem("movewith", 0);
});
//向左滑动
$("body").on("click", ".rightBtn li", function () {
var topTabsBox = $("#top_tabs_box"),
topTabsBoxWidth = $("#top_tabs_box").width(),
topTabs = $("#top_tabs"),
topTabsWidth = $("#top_tabs").width(),
tabLi = topTabs.find("li.layui-this"),
top_tabs = document.getElementById("top_tabs");
var movenext = window.sessionStorage.getItem("movewith");
if (topTabsWidth > topTabsBoxWidth) {
if (tabLi.position().left > topTabsBoxWidth || tabLi.position().left + topTabsBoxWidth > topTabsWidth) {
$("#top_tabs").css("left", -parseInt(movenext));
movenext = parseInt(movenext) + 133;
window.sessionStorage.setItem("movewith", movenext);
if (movenext > topTabsBoxWidth) {
window.sessionStorage.setItem("movewith", topTabsBoxWidth);
}
}
} else {
window.sessionStorage.setItem("movewith", 0);
}
});
$("body").on("click", ".top_tab li", function () {
//切换后获取当前窗口的内容
var curmenu = '',
menu = JSON.parse(window.sessionStorage.getItem("menu")),
thisInfo = $(this);
curmenu = menu[thisInfo.index() - 1];
if (thisInfo.index() == 0) {
window.sessionStorage.setItem("curmenu", '');
} else {
var nowClickTab = thisInfo.find("cite").text();
var nowCacheTabInfo = menu.find(x => x.title == nowClickTab);
window.sessionStorage.setItem("curmenu", JSON.stringify(nowCacheTabInfo));
if (window.sessionStorage.getItem("curmenu") == "undefined") {
//如果删除的不是当前选中的tab,则将curmenu设置成当前选中的tab
if (curNav != JSON.stringify(delMenu)) {
window.sessionStorage.setItem("curmenu", curNav);
} else {
window.sessionStorage.setItem("curmenu", JSON.stringify(menu[liIndex - 1]));
}
}
}
element.tabChange(tabFilter, thisInfo.attr("lay-id")).init();
// new Tab().tabMove();
//切换后立即刷新
if ("undefined" != typeof curmenu) {
if (curmenu.title == "数据中心") {
$(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
}
}
});
//删除tab
$("body").on("click", ".top_tab li i.layui-tab-close", function () {
//删除tab后重置session中的menu和curmenu
liIndex = $(this).parent("li").index();
var menu = JSON.parse(window.sessionStorage.getItem("menu"));
//获取被删除元素
delMenu = menu[liIndex - 1];
var curmenu = window.sessionStorage.getItem("curmenu") == "undefined" ? undefined : window.sessionStorage.getItem("curmenu") == "" ? '' : JSON.parse(window.sessionStorage.getItem("curmenu"));
if (JSON.stringify(curmenu) != JSON.stringify(menu[liIndex - 1])) { //如果删除的不是当前选中的tab
curNav = JSON.stringify(curmenu);
} else {
if ($(this).parent("li").length > liIndex) {
window.sessionStorage.setItem("curmenu", curmenu);
curNav = curmenu;
} else {
window.sessionStorage.setItem("curmenu", JSON.stringify(menu[liIndex - 1]));
curNav = JSON.stringify(menu[liIndex - 1]);
}
}
//menu.splice((liIndex - 1), 1);
element.tabDelete("bodyTab", $(this).parent("li").attr("lay-id")).init();
window.sessionStorage.setItem("menu", JSON.stringify(menu));
new Tab().tabMove();
setTimeout(() => {
var nowClickTab = $("#top_tabs").find(".layui-this cite").text();
var nowCacheTabInfo = menu.find(x => x.title == nowClickTab);
var lastTabInfo = [];
if (nowCacheTabInfo != "undefined") {
lastTabInfo = JSON.stringify(nowCacheTabInfo);
}
window.sessionStorage.setItem("curmenu", lastTabInfo);
}, 500);
});
var bodyTab = new Tab();
exports("bodyTab", function (option) {
return bodyTab.set(option);
});
});