- 前言
基于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();
})
|
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
