首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 10, 2016

目录结构：

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>

以上就是小编为大家带来的jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）
Mar 26 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #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
鉴频器(1) 灵敏度(1) 频率(1) 频偏(1) AM(1) 原理(1) 探测器(1) 电路(15) 发烧友(1) 实习报告(1)
You might like
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
javascript中常用编程知识
2013/04/08 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Bootstrap每天必学之工具提示（Tooltip）插件
2016/04/26 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
vue 请求后台数据的实例代码
2017/06/22 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python正则表达式学习小例子
2020/03/03 Python
校园之声广播稿
2014/01/31 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014年党支部工作总结
2014/11/13 职场文书
简单的辞职信模板
2015/05/12 职场文书
护士自荐信范文（2016推荐篇）
2016/01/28 职场文书
李清照的诗词赏析（20首）
2019/08/22 职场文书