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


Posted in Javascript onOctober 10, 2016

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

目录结构:

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

noContextMenu.js 文件内容如下:

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

效果图:

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

方式一:

<%@ 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 #Javascript
js实现弹窗居中的简单实例
Oct 09 #Javascript
老生常谈Javascript中的原型和this指针
Oct 09 #Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 #Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 #Javascript
You might like
第九节--绑定
2006/11/16 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python根据文件大小打log日志
2014/10/09 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python爬取三国演义的实现方法
2016/09/12 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
利用python画出AUC曲线的实例
2020/02/28 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
使用索引有什么好处
2016/07/27 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
客服主管岗位职责
2013/12/13 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
婚礼主持词
2014/03/13 职场文书
就职演讲稿范文
2014/05/19 职场文书
银行求职信范文
2014/05/26 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书