首页
所有分类
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 跨浏览器开发经验总结（五） js 事件
May 19 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
详解基于iview-ui的导航栏路径（面包屑）配置
Feb 22 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
JAVA(88) 池化技术(1) Springboot-cli(1) FutureTask(3) 主题(1) Android(19) Repository接口(3) CompletableFuture(1) 线程池(1) ForkJoin(1)
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php异常处理使用示例
2014/02/25 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
学习ExtJS table布局
2009/10/08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Django Admin 实现外键过滤的方法
2017/09/29 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
Under Armour澳大利亚官网：美国知名的高端功能性运动品牌
2018/02/22 全球购物
波兰家居和花园家具专家：4Home
2019/05/26 全球购物
客服部工作职责范本
2014/02/14 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
父母对孩子的寄语
2014/04/09 职场文书
《赶海》教学反思
2014/04/20 职场文书
ktv筹备计划书
2014/05/03 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python实现列表拼接和去重的三种方式
2021/07/02 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript