首页
所有分类
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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue之数据交互实例代码
Jun 20 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
详解weex默认webpack.config.js改造
Jan 08 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
JavaScript中数组去重的5种方法
Jul 04 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
索尼(5) ICF-7600(1) SONY(15) 数调机(1) RP-F11(1) 德劲(5) 东芝(1) TOSHIBA(1) 手调机(1) PL-880(1)
You might like
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js获取ip和地区
2017/03/10 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python cookbook（数据结构与算法）从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
python实现名片管理器的示例代码
2019/12/17 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
退伍老兵事迹材料
2014/01/31 职场文书
师德演讲稿范文
2014/05/06 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2015年双拥工作总结
2015/04/08 职场文书
通知函的格式
2015/04/27 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL