登录
当前位置： 首页 > 编程笔记 >

jQuery EasyUI右键菜单实现关闭标签/选项卡

郭辉
2023-03-14
本文向大家介绍jQuery EasyUI右键菜单实现关闭标签/选项卡，包括了jQuery EasyUI右键菜单实现关闭标签/选项卡的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作，供大家参考，具体内容如下

目录结构：

noContextMenu.js 文件内容如下：

$(function(){
 //屏蔽右键菜单
 $(document).bind("contextmenu", function(e){ return false; });
});

效果图：

方式一：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右键菜单-关闭标签方式一</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {

  //生成tab标签
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });

   //生成右键菜单 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
    //选中标签
    $('#tt').tabs('select',index);
    //显示右键菜单
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    }) ;
    }
   });
   
   //为每个菜单绑定点击事件
   //关闭选中的标签
   $("#closeCurrent").click(function(){
    //获取选中的标签索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
   });
   //关闭选中标签之外的标签
   $("#closeOthers").click(function(){
    //获取所有标签
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //获取选中标签的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //关闭选中标签之前的标签
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //关闭选中标签之后的标签
    for(var i=0;i<length-index-1;i++){
     $("#tt").tabs("close",1);
    }
   });
   //关闭所有标签
   $("#closeAll").click(function(){
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    for(var i=0;i<length;i++){
     $("#tt").tabs("close",0);
    }
   });
  
 });
 
</script>
</head>

<body>
 <!-- menu -->
 <div id="mm" class="easyui-menu" style="width:120px;">
  <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>
  <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
  <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">关闭所有</div>
 </div>

 <!-- tabs -->
 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>
  <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
  <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
 </div>
</body>
</html>

方式二：　　　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右键菜单-关闭标签方式二</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {
  //生成tab标签
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });
  
  //生成右键菜单 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
     //让默认事件失效
     e.preventDefault() ;
     //选中标签
     //$('#tt').tabs('select',title);
     $('#tt').tabs('select',index);
     //显示右键菜单
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    });
    $("#mm").menu({
      onClick : function (item) {
       /* alert(item.name);
       alert(typeof this) ; */
      closeTab(this, item.name);
      }
    });
    }
   });
   
 });
 
 //关闭标签的方法
 var closeTab = function(type,menuName){
  if(menuName == "closeCurrent"){
   //获取选中的标签索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
  }else if(menuName == "closeOthers"){
   //获取所有标签
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //获取选中标签的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //关闭选中标签之前的标签
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //关闭选中标签之后的标签
    for(var i=0;i<length-index-1;i++){
     $("#tt").tabs("close",1);
    }
  }else if(menuName == "closeAll"){
   var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    for(var i=0;i<length;i++){
     $("#tt").tabs("close",0);
    }
  } 
 } ;
 
</script>
</head>

<body>
 <!-- menu -->
 <div id="mm" class="easyui-menu" style="width:120px;">
  <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>
  <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
  <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">关闭所有</div>
 </div>

 <!-- tabs -->
 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>
  <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
  <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    本文向大家介绍jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例，包括了jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例的使用技巧和注意事项，需要的朋友参考一下 目录结构： noContextMenu.js 文件内容如下： 效果图： 方式 二：　 以上就是小编为大家带来的jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例全部内容了，希望大家多多支持

  • jquery实现右键菜单插件

    本文向大家介绍jquery实现右键菜单插件，包括了jquery实现右键菜单插件的使用技巧和注意事项，需要的朋友参考一下 今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了，写出来的代码和效果如下： js部分： css部分代码如下： 创建调用代码如下： 销毁调用代码如下： 效果如下： 调用

  • jQuery简单实现禁用右键菜单

    本文向大家介绍jQuery简单实现禁用右键菜单，包括了jQuery简单实现禁用右键菜单的使用技巧和注意事项，需要的朋友参考一下 代码非常简单，这里就不多废话了，直接上代码： 5行代码搞定，简单吧，当然小伙伴们可以自由扩展下，可以实现屏蔽右键菜单的指定项。

  • javascript - Vue3 + Element Plus 实现动态标签页及右键菜单实现的问题？

    在制作标签栏右击的选项中，使用右击选择不同标签的关闭 但是el-tab-pane中，加入 @contextmenu.prevent="this.openContextMenu($event)"失效，而el-tabs有效，但是我就不清楚点的那个标签了 然后请问一下还有别的方法吗？ https://blog.csdn.net/weixin_36757282/article/details/126578

  • 鼠标右键菜单效果

    1.首先准备我们的HTML <div class="menu"> <ul> <li>春眠不觉晓，处处闻啼鸟。</li> <li>Any <ul> <li>lover</li> <li>Gold

  • Jquery EasyUI Datagrid右键菜单实现方法

    本文向大家介绍Jquery EasyUI Datagrid右键菜单实现方法，包括了Jquery EasyUI Datagrid右键菜单实现方法的使用技巧和注意事项，需要的朋友参考一下 最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能 用户在每次使用的

相关阅读

基于JavaScript实现智能右键菜单JS简单实现自定义右键菜单实例jQuery代码实现对话框右上角菜单带关闭×jQuery实现自定义右键菜单的树状菜单效果C# 实现dataGridView选中一行右键出现菜单的示例代码

相关文章

Go语言关键字与标识符2.6.2 菜单(Menu)JavaFX菜单(Menu)Bootstrap 标签JavaFX标签

相关问答

单击项目菜单时如何关闭抽屉菜单？当用户选择上下文菜单项时，使上下文菜单忽略右键单击windows - 软件添加到右键菜单是怎么实现的？如何通过右键单击选择列表/树/表格项目，同时打开关联菜单？*ngFor指令不显示菜单项数据上下文菜单右键单击角

相关工具

左右菜单Demo右键助手滚动菜单四格菜单旋转菜单

相关文档

Git 菜单KAG 标签文档 v1.0Linux-4.4-x86_64 内核配置选项Linux 内核引导选项简介Redis 设计与实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.