layui选项卡切换及右键的动态操作（新增、切换、删除）

先来看个效果图（文章底部有gitee地址）

要实现的效果：

选项卡的新增以及切换
选项卡刷新
选项卡各种删除：删除其他、删除右侧所有、删除所有

OK，直接上代码，一些引入文件就不写了，这里只列出主要的代码，有需要的话可以去Gitee自行下载。

布局：

<body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><a href=""><div class="layui-logo" style="color: #FFFFFF;">选项卡Demo</div></a><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="">退出</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:void(0);">用户管理</a><dl class="layui-nav-child"><dd><a data-url="userInfo.html" data-id="11" data-title="个人中心" href="javascript:void(0);"class="site-demo-active"data-type="tabAdd">个人中心</a></dd><dd><a data-url="password.html" data-id="12" data-title="修改密码" href="javascript:void(0);"class="site-demo-active"data-type="tabAdd">修改密码</a></dd><dd><a data-url="userList.html" data-id="13" data-title="用户列表" href="javascript:void(0);"class="site-demo-active"data-type="tabAdd">用户列表</a></dd></dl></li><li class="layui-nav-item"><a class="" href="javascript:void(0);">系统管理</a><dl class="layui-nav-child"><dd><a data-url="notice.html" data-id="21" data-title="公告管理" href="javascript:void(0);"class="site-demo-active"data-type="tabAdd">公告管理</a></dd><dd><a data-url="security.html" data-id="22" data-title="安全中心" href="javascript:void(0);"class="site-demo-active"data-type="tabAdd">安全中心</a></dd></dl></li></ul></div></div><!-- 选项卡和内容区 --><div class="layui-tab" lay-filter="home-tabs" lay-allowclose="true" style="margin: 0 0 0 200px;"><ul class="layui-tab-title"></ul><ul class="rightmenu" style="display: none;position: absolute;"><li data-type="refresh">刷新</li><li data-type="closeOthers">关闭其他</li><li data-type="closeRight">关闭右侧所有</li><li data-type="closeAll">关闭所有</li></ul><div class="layui-tab-content"></div></div><!-- 底部固定区域 --><div class="layui-footer" style="text-align: center">底部固定区域</div>
</div></body>

js：（注：选项卡需要依赖element模块）

<script type="text/javascript">layui.use('element', function () {var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块//触发事件var active = {//在这里给active绑定几项事件，后面可通过active调用这些事件tabAdd: function (url, id, name) {//新增一个Tab项 传入三个参数，分别是tab页面的地址，还有一个规定的id，对应其标题，是标签中data-id的属性值//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分element.tabAdd('home-tabs', {title: name,content: '<iframe id="aaa" data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +'" style="width:100%;height:99%;"></iframe>',id: id //规定好的id})//通过鼠标mouseover事件  动态将新增的tab下的li标签绑定鼠标右键功能的菜单   //下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据$(".layui-tab-title li[lay-id=" + id + "]").mouseover(function () {var tabId = $(this).attr("lay-id");CustomRightClick(tabId); //给tab绑定右击事件FrameWH(); //计算ifram层的大小});},tabChange: function (id) {//切换到指定Tab项element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项},tabDelete: function (id) {element.tabDelete('home-tabs', id); //删除},tabRefresh: function (id) { //刷新页面$("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //刷新框架}};//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件$('.site-demo-active').on('click', function () {var dataid = $(this);//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目if ($(".layui-tab-title li[lay-id]").length <= 0) {//如果比零小，则直接打开新的tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));} else {//否则判断该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") == dataid.attr("data-id")) {isData = true;}})if (isData == false) {//标志为false 新增一个tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));}}//最后不管是否新增tab，最后都转到要打开的选项页面上active.tabChange(dataid.attr("data-id"));});function CustomRightClick(id) {//取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏$('.layui-tab-title li').on('contextmenu', function () {return false;})$('.layui-tab-title,.layui-tab-title li').click(function () {$('.rightmenu').hide();});//单击取消右键菜单$('body,#aaa').click(function () {$('.rightmenu').hide();});//tab点击右键 $('.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(); //进行绝对定位return false;});}$(".rightmenu li").click(function () {//当前的tabIdvar currentTabId = $(this).attr("data-id");if ($(this).attr("data-type") == "closeOthers") { //关闭其他var tabtitle = $(".layui-tab-title li");$.each(tabtitle, function (i) {if ($(this).attr("lay-id") != currentTabId) {active.tabDelete($(this).attr("lay-id"))}})} else if ($(this).attr("data-type") == "closeAll") { //关闭全部var tabtitle = $(".layui-tab-title li");$.each(tabtitle, function (i) {active.tabDelete($(this).attr("lay-id"))})} else if ($(this).attr("data-type") == "refresh") { //刷新页面active.tabRefresh($(this).attr("data-id"));} else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有//找到当前聚焦的li之后的所有li标签 然后遍历var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");$.each(tabtitle, function (i) {active.tabDelete($(this).attr("lay-id"))})}$('.rightmenu').hide();});//导航栏点击选中时关闭其他选项卡$('.layui-nav-item').click(function () {$(this).siblings('li').attr('class', 'layui-nav-item');});function FrameWH() {var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;$("iframe").css("height", h + "px");}$(window).resize(function () {FrameWH();})//打开默认页面active.tabAdd("userInfo.html", 11, "个人中心");active.tabChange(11);});
</script>

码云地址：https://gitee.com/honvin180/layui-tabs

layui选项卡切换及右键的动态操作（新增、切换、删除）相关推荐

layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
Linux深入浅出--3.vi和vim的使用及关机重启命令及用户管理、添加查询切换用户、用户组的操作及Linux系统运行级别及找回root密码
目录一.vi和vim 1.vi和vim的基本介绍 2.vi和vim常用的三种模式 vim使用简单入门 3.三种模式转换结构图 4.vi和vim的快捷键使用二.关机&重启命令三.用户管理 ...
layui选项卡切换刷新页面
layui选项卡切换刷新页面最近在改之前工作流页面,遇到选项卡切换刷新的问题简单叙述需求: 1.在我的流程页面分别有:我的待办.我的已办.我发起的:三个页面 2.页面有"暂无数据&quo ...
layui选项卡嵌套选项卡_在ProtoPie中使用嵌套组件构建选项卡栏
layui选项卡嵌套选项卡 One of the powerful features of ProtoPie is the ability to build fully portable and in ...
使用脚本动态操作 SVG 文档
本教程适用于那些希望使用可伸缩向量图形(SVG)创建交互式 SVG 图形的开发人员.它讨论了使用ECMAScript(JavaScript)对现有的 SVG 图像进行实时操作得技术. 本文主要介绍在 ...
基于动态邻域的切换粒子群优化算法
英文: A Dynamic Neighborhood-Based Switching Particle Swarm Optimization Algorithm 摘要: 本文提出了一种基于动态邻域的切 ...
react-contexify 右键菜单动态生成
react-contexify右键菜单动态生成如果菜单数量少,并且没有其他地方需要共用菜单列表,建议参考react-contexify的右键菜单属性disabled不起作用此文中处理方法相对快捷 ...
【原】简单的鼠标切换左右键(java版)
简单的鼠标切换左右键(java版) 0. 写在最前面客户需要一个能切换左右键的小功能满足使用需要. 具体需要如下: 我需要一个独立运行的窗口,在其中输入数字x,按下"转换"按钮后 ...
使用avaScript脚本动态操作 SVG 文档
使用脚本动态操作 SVG 文档陈珂 (chenke@snmobile.com), 技术总监, 南京安元科技简介: 本教程适用于那些希望使用可伸缩向量图形(SVG)创建交互式 SVG 图形的开发人员 ...

layui选项卡切换及右键的动态操作（新增、切换、删除）

layui选项卡切换及右键的动态操作（新增、切换、删除）相关推荐

最新文章

热门文章