layUI 后台界面Tab选项卡--右键关闭其他Tab和全部Tab选项卡

于 2024-06-20 09:27:42 发布
阅读量309 收藏
点赞数 3
分类专栏： springboot 文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuweifan/article/details/139819667
版权

layui的tab选项卡，没有关闭所有和关闭其他的功能，只能自定义做一个了。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet"/>

    <title>LayUI前端</title>
    <style>
        .rightmenu { position: absolute; width: 80px; z-index: 9999; display: none; background-color: #fff; padding: 2px; color: #333; border: 1px solid #eee; border-radius: 2px; cursor: pointer; }
        .rightmenu li { text-align: center; display: block; height: 25px; line-height: 25px; }
        .rightmenu li:hover { background-color: #666; color: #fff; }
    </style>
</head>
<body>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">layui 后台布局</div>
                <!-- 头部区域（可配合layui已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="">控制台</a></li>
                    <li class="layui-nav-item"><a href="">商品管理</a></li>
                    <li class="layui-nav-item"><a href="">用户</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">其它系统</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">邮件管理</a></dd>
                            <dd><a href="">消息管理</a></dd>
                            <dd><a href="">授权管理</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                            张三
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="~/Student2/LogOut">退了</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-nav-itemed">
                            <a class="" href="javascript:;">所有商品</a>
                            <dl class="layui-nav-child">
                                <dd><a class="site-active" tab-name="学生列表A" tab-url="/Demo/StudentTab" tab-layid="11" href="javascript:;">学生列表A</a></dd>
                                <dd><a class="site-active" tab-name="学生列表B" tab-url="/Student2/Student2Tab" tab-layid="22" href="javascript:;">学生列表B</a></dd>
                                <dd><a class="site-active" tab-name="学生列表C" tab-url="/Student2/Student2Tab" tab-layid="33" href="javascript:;">学生列表C</a></dd>
                                <dd><a class="site-active" tab-name="学生列表D" tab-url="/Student2/Student2Tab" tab-layid="44" href="javascript:;">学生列表D</a></dd>
                                <dd><a class="site-active" tab-name="学生列表E" tab-url="/Student2/Student2Tab" tab-layid="55" href="javascript:;">学生列表E</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">解决方案</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">列表一</a></dd>
                                <dd><a href="javascript:;">列表二</a></dd>
                                <dd><a href="">超链接</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="">云市场</a></li>
                        <li class="layui-nav-item"><a href="">发布商品</a></li>
                    </ul>
                </div>
            </div>
            

            <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
                <ul class="layui-tab-title">
                </ul>
                <ul class="rightmenu">
                    <li data-type="closeOther">关闭其他</li>
                    <li data-type="closeall">关闭所有</li>
                </ul>
                <div class="layui-tab-content"></div>
            </div>

            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div layui-body style="padding: 15px;">
                    <div class="layui-tab" lay-allowClose="true" lay-filter="tabList">
                        <ul class="layui-tab-title">
                        </ul>
                        <div class="layui-tab-content">


                        </div>
                    </div>
                </div>
            </div>




            <div class="layui-footer">
                <!-- 底部固定区域 -->
                © layui.com - 底部固定区域
            </div>
        </div>
        <script src="~/Content/layui/layui.js"></script>
        <script>
            //JavaScript代码区域
           
            layui.use(['element', 'jquery'], function () {
                var element = layui.element,
                    $ = layui.jquery;

                var deleteIndex;//全局变量

                element.on('tab(tabList)', function(data){
                    deleteIndex=$(this).attr("lay-id");
                });

                //触发事件
                var active = {
                    tabAdd: function (name, url, layid) {
                        element.tabAdd('tabList', {
                            title: name //'选项卡的标题'
                            , content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
                            , id: layid//'选项卡标题的lay-id属性值'
                        });
                        CustomRightClick(layid);   //给tab绑定右击事件
                        FrameWH();
                    },
                    tabChange: function (layid) {
                        element.tabChange('tabList', layid);
                    },
                    tabDelete: function (layid) {
                        element.tabDelete('tabList', layid);
                    },
                    tabDeleteAll: function(ids) {
                        $.each(ids,
                            function(i, item) {
                                element.tabDelete("tabList", item);
                            });
                    }
                }


                //当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
                $('.site-active').on("click", function () {
                    var dataid = $(this);
                    var name = dataid.attr("tab-name");
                    var url = dataid.attr("tab-url");
                    var tab_layid = dataid.attr("tab-layid");


                    //1、 判断tab-layid=layid的tab页是否打开
                    if ($(".layui-tab-title li[lay-id]").length <= 0) { //1.1 初始状态：1个Tab页也没有打开
                        active.tabAdd(name, url, tab_layid); //打开tab页
                        active.tabChange(tab_layid)//转到该tab页
                    } else { //1.2   判断该Tab页是否已打开
                        var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                        $.each($(".layui-tab-title li[lay-id]"),
                            function() {

                                //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                                if ($(this).attr("lay-id") == tab_layid) {
                                    isData = true;

                                }
                            });
                        if (isData == false) {
                            //标志为false 新增一个tab项
                            active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
                        }

                        active.tabChange(tab_layid)//1.2.2 转到该tab页
                    }


                    FrameWH();  //计算ifram层的大小

                });

                function CustomRightClick(id) {
                    //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
                    $('.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); //在右键菜单中的标签绑定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;
                    });
                }

                $(".rightmenu li").click(function() {
                    if ($(this).attr("data-type") == "closeOther") {//关闭其他
                        $.each($(".layui-tab-title li[lay-id]"), function () {
                            //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                            if ($(this).attr("lay-id")!=deleteIndex) {
                                console.log("即将删除lay-id"+$(this).attr("lay-id"));
                                active.tabDelete($(this).attr("lay-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();
                });



                function FrameWH() { //计算ifram层的大小
                    var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                    $("iframe").css("height", h + "px");
                }

                $(window).resize(function() {
                    FrameWH();
                });

            });
        </script>
    </body>
</body>
</html>

一个高效工作的家伙
关注
专栏目录
[Layui]主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭)
德仔
03-17 3379
主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭) 效果如下： CSS <style> .layui-tab-item { height: 100%; width: 100%; } .rightmenu { position: absolute; width: 100px; z-index: 999
layui选项卡切换及右键的动态操作（新增、切换、删除）
honvin的博客
09-29 1万+
要实现的效果：选项卡的新增以及切换、选项卡刷新、选项卡各种删除：删除其他、删除右侧所有、删除所有
【总结】C#上传excel文件到Sql server数据库
ChinaSaoPao的博客
06-12 3161
工具 ： VS2015 + SQL Server 2008 R2 框架：三层+一般处理程序 方法：方法很多种，百度千奇百怪，总结下来更好更快的方法，以下会提到 最近接触到需要实现将一个excel表格的数据移植到数据库的需求，但此前从未接触过 百度+体会+探讨 总结下来以便后续需要使用，乐于分享给大家，望给予修正 少废话上代码 ①数据库，移植到数据库肯定需要表吧，都懂不多说 ...
C#上传Excel到SQL
计算机系秃头少女的博客
05-30 521
Index.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="~/Content/LayUI/css/layui.cs
C#Excel上传
PiNossan的博客
05-21 2819
前台代码：    &lt;div&gt;          @using (Html.BeginForm("UploadOrderExcel", "Image", FormMethod.Post, new { enctype = "multipart/form-data" }))         {             &lt;input type="file" id="file1&quot
C# Excel上传代码
10-24
C# Excel上传代码，可直接使用，C# Excel上传代码，可直接使用
Layui 关闭layui的tab页
热门推荐
BugRoot的博客
08-16 1万+
引用admin.js。 var admin = layui.admin; var topAdmin = parent === self ? admin : parent.layui.admin; // 关闭tab页 topAdmin.closeThisTabs(); $("#LAY_app_tabsheader>li").eq(admin.tabsPage.index).find('.layui-tab-close').trigger('click');
layui Tab选项卡切换跟随特效（源码）
09-14
首先，layui的Tab选项卡是一个常见的页面布局元素，用于将大量内容组织成清晰、简洁的模块，用户可以通过点击不同的选项卡来切换显示的内容。这种功能在展示多层级信息或者避免页面过于拥挤时特别有用。在layui中，...
layui弹出框Tab选项卡的示例代码
10-16
在本文中，我们将深入探讨如何使用layui框架创建带有Tab选项卡的弹出框，并通过示例代码展示如何在这些选项卡之间传递数据以及与父窗口交互。layui是一款轻量级的前端组件库，提供了丰富的UI组件，其中包括弹出框和...
layui tab选项卡外部html页面,layui的Tab选项卡知识
weixin_33274667的博客
06-03 1227
layui的公共类:lay-filter=" "事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器layui的公共属性:layui-show属性:显示页面元素tab选项卡介绍:tab选项卡，可用于一个界面点击，显示另一个界面的内容 重要依赖加载组件：element(请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 -...
layerui代码控制tab选项卡,添加,关闭的实例
10-16
今天小编就为大家分享一篇layerui代码控制tab选项卡,添加,关闭的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
c# excel采用三种方式上传数据
03-28
c# excel采用三种方式上传数据 c# excel采用三种方式上传数据
C#导入excel
08-11
不用插件，快速将Excel的数据导入至数据库
C#excel 文件上传并进行分页
Jackey·Now
02-11 324
private int Inum = 1; //行号，规定其索引初始值为1 int pagesize = 2;//每页的数据条数 int pagecount = 0;//共有几页 string file = ""; int allCount = 0;//共有几条 DataTable dw = new DataTab...
C# 导入EXCEL到sql server数据库
学无止境的专栏
03-03 4116
C# 导入EXCEL到sql server数据库2007/08/05 07:01 A.M. using System;using System.Data;using System.Configuration;using System.Collections;using Syst
layui中的指定tab标签关闭
m0_55000378的博客
04-30 3984
layui中的指定tab标签关闭 layui的选项卡只有第一次打开的时候获取最新的数据，为了不让用户每次操作时刷新，使用本方法让选项卡页面关闭后再打开 关闭当前打开的tab页面 parent.layui.admin.events.closeThisTabs(); 关闭非当前tab选项卡，即另一个打开的iframe中的tab选项卡 1.首先引入admin.js(所有操作tab都需要导入admin.js) <script src="${pageContext.request.contextPath }/
C#通过excel导入数据，上传文件
weixin_30751947的博客
12-28 538
通过下载定制的excel模板，在excel模板上添加数据实现对数据的批量上传于修改， 获取excel内容返回DataTable，再DataTable中验证处理上传的数据保存到数据库，代码如下 using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;usi...
基于layui的管理后台简单导航，简单框架布局。左侧菜单栏以及动态操作tab项
小熊猫
06-11 3195
网上找不到可直接用的， 于是找了大神的片段代码，自己又优化完善了下，可拿来直接使用。 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonWeb.aspx.cs" Inherits="MyProject.CommonWeb" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser
layui tab标签右键关闭菜单
艾小逗
03-26 4076
layui tab标签右键关闭菜单， 包括：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closeleft）、关闭右侧所有（closeright）、刷新当前页（refresh） 样式如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190326143457860.png?x-oss-p...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个高效工作的家伙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值