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

jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

沙海
2023-03-14
本文向大家介绍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右键菜单实现关闭标签/选项卡，包括了jQuery EasyUI右键菜单实现关闭标签/选项卡的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作，供大家参考，具体内容如下 目录结构： noContextMenu.js 文件内容如下： 效果图： 方式一： 方式二：　　　　 以上就是本文的全部

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

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

  • 单击时关闭选项卡

    我正在尝试在我的网站上做一个标签功能，我希望有那个标签响应。所以我做了这样的代码： null null 现在我有两样东西， > 首先，我希望在单击标题（伦敦、巴黎、东京）时关闭选项卡，然后在单击该标题时从该标题中删除活动类。 其次，我希望有两个标签在行的响应，第三个标签在第二行，然后单击打开被点击的标签，然后向下推第三个标签。 任何提示都会有帮助，提前谢谢

  • JS简单实现自定义右键菜单实例

    本文向大家介绍JS简单实现自定义右键菜单实例，包括了JS简单实现自定义右键菜单实例的使用技巧和注意事项，需要的朋友参考一下 RT，一个简单的例子，仅仅讲述原理   假设我要把上面这个div设置为右键菜单，先随意美化一下。 原理就是利用contextmenu事件，右键点击时，会触发这个事件时，该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY， 我们可以利用这两个属性，来控制d

  • 关于右键菜单的制作

    　点下鼠标右键后呼叫的 KAG 的游戏界面。 　例如使用右键来调出存储/读取画面。 总之先上范例 　调用右键菜单的指令是 rclick 。使用这个指令、可以设定点下右键后呼叫的剧本段落。此外，也可以不使用呼叫（调用菜单后，使用return可以返回游戏），而是直接跳转到某个标签（右键跳跃后无法返回，等同于jump）。 　例如，在 rlick.ks 里写入以下内容。 例: *rclick @rclic

  • 鼠标右键菜单效果

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

相关阅读

jquery实现右键菜单插件为jQuery-easyui的tab组件添加右键菜单功能的简单实例jQuery实现自定义右键菜单的树状菜单效果使用React JS右键单击菜单js实现简洁的滑动门菜单(选项卡)效果代码

相关文章

ionic tab(选项卡)实战-Swing实现简单爬虫ionic 侧栏菜单ionic 上拉菜单Bootstrap 下拉菜单

相关问答

Windows任务栏右键菜单中的标题javascript - Vue3 + Element Plus 实现动态标签页及右键菜单实现的问题？当用户选择上下文菜单项时，使上下文菜单忽略右键单击*ngFor指令不显示菜单项数据上下文菜单右键单击角如何通过右键单击选择列表/树/表格项目，同时打开关联菜单？

相关工具

左右菜单Demo滚动菜单四格菜单旋转菜单简单UITableViewDemo

相关文档

Git 菜单Markdown 简单的世界上云如此简单简单粗暴 TensorFlow 2Ember.js 简单入门教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.