layui 操作Tab
- 前言
基于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(); }) |
