- 前言
基於layui的tab操作，此文僅作參考，學習之用
- 首先下載layui后台框架
- 打開后台代碼文件
在內容部分插入以下代碼
|
1
2
3
4
|
<
div
class="layui-tab" lay-filter="demo" lay-allowclose="true">
<
ul
class="layui-tab-title"></
ul
>
<
div
class="layui-tab-content"></
div
>
</
div
>
|
3.編寫js代碼
引用js：layui.all.js 或者 layui.js，這兩種只是寫法的區別，功能都一樣，具體寫法參考官方文檔即可
4.增加觸發事件
|
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
|
var
active = {
tabAdd:
function
(url, id) {
//新增一個Tab項
element.tabAdd(
'demo'
, {
title:
'新選項'
+ (Math.random() * 1000 | 0)
//用於演示
, content:
'<iframe data-frameid="'
+id+
'" frameborder="0" name="content" scrolling="no" width="100%" src="'
+ url +
'"></iframe>'
, id: id
//實際使用一般是規定好的id，這里以時間戳模擬下
})
CustomRightClick(id);
//綁定右鍵菜單
FrameWH();
//計算框架高度
}
, tabChange:
function
(id) {
//切換到指定Tab項
element.tabChange(
'demo'
, id);
//切換到：用戶管理
$(
"iframe[data-frameid='"
+id+
"']"
).attr(
"src"
,$(
"iframe[data-frameid='"
+id+
"']"
).attr(
"src"
))
//切換后刷新框架
}
, tabDelete:
function
(id) {
element.tabDelete(
"demo"
, id);
//刪除
}
, tabDeleteAll:
function
(ids) {
//刪除所有
$.each(ids,
function
(i,item) {
element.tabDelete(
"demo"
, item);
})
}
};
|
當然在此之前不能忘記需要載入相應對象
|
1
2
3
|
var
$ = jQuery = layui.jquery;
var
element = layui.element;
//Tab的切換功能，切換事件監聽等，需要依賴element模塊
var
layer = layui.layer;
|
5.觸發代碼完成后，關聯觸發條件，我的是左側導航點擊觸發，因為重復觸發，不能一直打開新的，所以寫了一些判斷
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//結合菜單展示內容
$(
".layui-side-scroll a"
).click(
function
() {
var
dataid = $(
this
);
if
($(
".layui-tab-title li[lay-id]"
).length <= 0) {
active.tabAdd(dataid.attr(
"data-url"
), dataid.attr(
"data-id"
));
}
else
{
var
isData =
false
;
$.each($(
".layui-tab-title li[lay-id]"
),
function
() {
if
($(
this
).attr(
"lay-id"
) == dataid.attr(
"data-id"
)) {
isData =
true
;
}
})
if
(isData ==
false
) {
active.tabAdd(dataid.attr(
"data-url"
), dataid.attr(
"data-id"
));
}
}
active.tabChange(dataid.attr(
"data-id"
));
})
|
6.為了效果更好一點，我在tab標簽上增加了右鍵功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//綁定右鍵菜單
function
CustomRightClick(id) {
//取消右鍵
$(
'.layui-tab-title li'
).on(
'contextmenu'
,
function
() {
return
false
; })
$(
'.layui-tab-title,.layui-tab-title li'
).click(
function
() {
$(
'.rightmenu'
).hide();
});
//桌面點擊右擊
$(
'.layui-tab-title li'
).on(
'contextmenu'
,
function
(e) {
var
popupmenu = $(
".rightmenu"
);
popupmenu.find(
"li"
).attr(
"data-id"
,id);
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({ left: l, top: t }).show();
//alert("右鍵菜單")
return
false
;
});
}
|
下面是右鍵的html代碼
|
1
2
3
4
|
<
ul
class="rightmenu">
<
li
data-type="closethis">關閉當前</
li
>
<
li
data-type="closeall">關閉所有</
li
>
</
ul
>
|
7.右鍵菜單有了，就需要給右鍵添加功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(
".rightmenu li"
).click(
function
() {
if
($(
this
).attr(
"data-type"
) ==
"closethis"
) {
active.tabDelete($(
this
).attr(
"data-id"
))
}
else
if
($(
this
).attr(
"data-type"
) ==
"closeall"
) {
var
tabtitle = $(
".layui-tab-title li"
);
var
ids =
new
Array();
$.each(tabtitle,
function
(i) {
ids[i] = $(
this
).attr(
"lay-id"
);
})
active.tabDeleteAll(ids);
}
$(
'.rightmenu'
).hide();
})
|
8.完成后，我們還需要計算iframe的高度，因為自動高度，會導致iframe擠到一起
|
1
2
3
4
5
6
7
8
|
function
FrameWH() {
var
h = $(window).height() -41- 10 - 60 -10-44 -10;
$(
"iframe"
).css(
"height"
,h+
"px"
);
}
$(window).resize(
function
() {
FrameWH();
})
|