首先说一下左侧菜单栏

这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发现页面是这样的：

发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在html代码下面导入，才可以显示 ，不知道是什么原因。
下面说重点，动态操作tab项
页面截图：

tab项右键菜单：

这里右键菜单的样式并没有做太多的美化。
html代码：（页面中关于引入js和css文件的部分被我省略了，还有要注意jQuery的引入顺序）

1. <div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
   
2.             <ul class="layui-nav layui-nav-tree layui-nav-side">
   
3.                 <li class="layui-nav-item layui-nav-itemed">
   
4.                     <a href="javascript:;">默认展开</a>
   
5.                     <dl class="layui-nav-child">
   
6.                         <dd>
   
7.                             <a data-url="a" data-id="11" data-title="选项a" href="#" class="site-demo-active" data-type="tabAdd">选项a</a>
   
8.                         </dd>
   
9.                         <dd>
   
10.                             <a href="#" data-url="b" data-title="选项b"  data-id="22" class="site-demo-active" data-type="tabAdd">选项b</a>
    
11.                         </dd>
    
12.                         <dd>
    
13.                             <a href="">跳转</a>
    
14.                         </dd>
    
15.                     </dl>
    
16.                 </li>
    
17.                 <li class="layui-nav-item">
    
18.                     <a href="javascript:;">解决方案</a>
    
19.                     <dl class="layui-nav-child">
    
20.                         <dd>
    
21.                             <a href="">移动模块</a>
    
22.                         </dd>
    
23.                         <dd>
    
24.                             <a href="">后台模版</a>
    
25.                         </dd>
    
26.                         <dd>
    
27.                             <a href="">电商平台</a>
    
28.                         </dd>
    
29.                     </dl>
    
30.                 </li>
    
31.                 <li class="layui-nav-item">
    
32.                     <a href="#" data-url="c" data-title="选项c"  data-id="33" class="site-demo-active" data-type="tabAdd">产品c</a>
    
33.                 </li>
    
34.                 <li class="layui-nav-item">
    
35.                     <a href="">大数据</a>
    
36.                 </li>
    
37.             </ul>
    
38. 
    
39.             <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
    
40.                 <ul class="layui-tab-title">
    
41.                 </ul>
    
42.                 <ul class="rightmenu" style="display: none;position: absolute;">
    
43.                     <li data-type="closethis">关闭当前</li>
    
44.                     <li data-type="closeall">关闭所有</li>
    
45.                 </ul>
    
46.                 <div class="layui-tab-content">
    
47.                 </div>
    
48.             </div>
    
49. 
    
50.         </div>

复制代码

js代码：

1. layui.use('element', function() {
   
2.             var $ = layui.jquery;
   
3.             var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
   
4. 
   
5.             //触发事件
   
6.             var active = {
   
7.                 //在这里给active绑定几项事件，后面可通过active调用这些事件
   
8.                 tabAdd: function(url,id,name) {
   
9.                     //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
   
10.                     //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
    
11.                     element.tabAdd('demo', {
    
12.                         title: name,
    
13.                         content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
    
14.                         id: id //规定好的id
    
15.                     })
    
16.                      CustomRightClick(id); //给tab绑定右击事件
    
17.                      FrameWH();  //计算ifram层的大小
    
18.                 },
    
19.                 tabChange: function(id) {
    
20.                     //切换到指定Tab项
    
21.                     element.tabChange('demo', id); //根据传入的id传入到指定的tab项
    
22.                 },
    
23.                 tabDelete: function (id) {
    
24.                 element.tabDelete("demo", id);//删除
    
25.                 }
    
26.                 , tabDeleteAll: function (ids) {//删除所有
    
27.                     $.each(ids, function (i,item) {
    
28.                         element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
    
29.                     })
    
30.                 }
    
31.             };
    
32. 
    
33. 
    
34.             //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
    
35.             $('.site-demo-active').on('click', function() {
    
36.                 var dataid = $(this);
    
37. 
    
38.                 //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
    
39.                 if ($(".layui-tab-title li[lay-id]").length <= 0) {
    
40.                     //如果比零小，则直接打开新的tab项
    
41.                     active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
    
42.                 } else {
    
43.                     //否则判断该tab项是否以及存在
    
44. 
    
45.                     var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
    
46.                     $.each($(".layui-tab-title li[lay-id]"), function () {
    
47.                         //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
    
48.                         if ($(this).attr("lay-id") == dataid.attr("data-id")) {
    
49.                             isData = true;
    
50.                         }
    
51.                     })
    
52.                     if (isData == false) {
    
53.                         //标志为false 新增一个tab项
    
54.                         active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
    
55.                     }
    
56.                 }
    
57.                 //最后不管是否新增tab，最后都转到要打开的选项页面上
    
58.                 active.tabChange(dataid.attr("data-id"));
    
59.             });
    
60. 
    
61.             function CustomRightClick(id) {
    
62.                 //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
    
63.                 $('.layui-tab-title li').on('contextmenu', function () { return false; })
    
64.                 $('.layui-tab-title,.layui-tab-title li').click(function () {
    
65.                     $('.rightmenu').hide();
    
66.                 });
    
67.                 //桌面点击右击
    
68.                 $('.layui-tab-title li').on('contextmenu', function (e) {
    
69.                     var popupmenu = $(".rightmenu");
    
70.                     popupmenu.find("li").attr("data-id",id); //在右键菜单中的标签绑定id属性
    
71. 
    
72.                     //判断右侧菜单的位置
    
73.                     l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    
74.                     t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    
75.                     popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
    
76.                     //alert("右键菜单")
    
77.                     return false;
    
78.                 });
    
79.             }
    
80. 
    
81.             $(".rightmenu li").click(function () {
    
82. 
    
83.                 //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
    
84.                 if ($(this).attr("data-type") == "closethis") {
    
85.                     //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete
    
86.                     active.tabDelete($(this).attr("data-id"))
    
87.                 } else if ($(this).attr("data-type") == "closeall") {
    
88.                     var tabtitle = $(".layui-tab-title li");
    
89.                     var ids = new Array();
    
90.                     $.each(tabtitle, function (i) {
    
91.                         ids[i] = $(this).attr("lay-id");
    
92.                     })
    
93.                     //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
    
94.                     active.tabDeleteAll(ids);
    
95.                 }
    
96. 
    
97.                 $('.rightmenu').hide(); //最后再隐藏右键菜单
    
98.             })
    
99.             function FrameWH() {
    
100.                 var h = $(window).height() -41- 10 - 60 -10-44 -10;
     
101.                 $("iframe").css("height",h+"px");
     
102.             }
     
103. 
     
104.             $(window).resize(function () {
     
105.                 FrameWH();
     
106.             })
     
107.         });

复制代码

tab项是放在

1. <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">

复制代码

这个div中的，其中有一个重要的属性lay-filter，在js中调用的tabAdd，tabDelete等多种方法都携带了这个参数，我对此的理解是相当于一个判断拦截功能，将tab项放在

1. lay-filter=‘demo’

复制代码

的div中。可以借助该参数，完成指定元素的局部更新。
其中还有关于element的操作，

1. var element = layui.element

复制代码

element模块的实例
返回的element变量为该实例的对象，携带一些用于元素操作的基础方法，我们就是用这些方法进行tab项的新增和删除还有切换。
这是element 中的tabAdd方法，其中的content可以是一个iframe页面，在此例中，我就是传递了一个简单的页面，这就实现了不同页面间的一些切换。

1. element.tabAdd('demo', {
   
2.   title: '选项卡的标题'
   
3.   ,content: '选项卡的内容' //支持传入html
   
4.   ,id: '选项卡标题的lay-id属性值'
   
5. });

复制代码

贴上之前参照的一个地址：https://www.cnblogs.com/zhoushangwu/p/7891543.html
到此这篇关于使用layui实现左侧菜单栏及动态操作tab项的方法的文章就介绍到这了,更多相关layui动态操作tab项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/751635.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！