首页
所有分类
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 相关文章推荐
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
浅析java线程中断的办法
Jul 29 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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) SQL注入(2) IC-R9500(1) 增删查改(1) 代理(2) #{}(1) 克隆(1) 脏读(2) canvas(2) 外键(1)
You might like
详解PHP数组赋值方法
2015/11/07 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
深入解析Python中的lambda表达式的用法
2015/08/28 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python将视频转换为全字符视频
2019/04/26 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
西班牙英格列斯百货官网：El Corte Inglés
2016/09/25 全球购物
澳大利亚先进的皮肤和激光诊所购物网站：Soho Skincare
2018/10/15 全球购物
几个人围成一圈的问题
2013/09/26 面试题
求职推荐信
2013/10/28 职场文书
监理员的岗位职责
2013/11/13 职场文书
王老吉广告词
2014/03/20 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
催款律师函范文
2015/05/27 职场文书
周一问候语大全
2015/11/10 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis