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 右键菜单--关闭标签/选项卡的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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
You might like
19个超实用的PHP代码片段
2014/03/14 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Node.js 路由的实现方法
2019/06/05 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
python通过文件头判断文件类型
2015/10/30 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python单例设计模式实现解析
2020/01/07 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
安全承诺书范文
2014/03/26 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
入党函调证明材料
2014/12/24 职场文书
婚宴新娘致辞
2015/07/28 职场文书
食品安全主题班会
2015/08/13 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书