<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyui右键菜单-关闭标签</title>

<!--使用easyUI前端框架，需要引入easyUI的js，css-->

<!-- JavaScript插件引入 -->

<script type="text/javascript" src="scripts/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="scripts/easyui-1.5/jquery.easyui.min.js"></script>

<script type="text/javascript" src="scripts/easyui-1.5/locale/easyui-lang-zh_CN.js"></script>

<!-- CSS样式引入 -->

<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/themes/icon.css">

<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/demo/demo.css">

<!--关闭选项卡的js-->
　　　　

<script type="text/javascript">
$(function() {
　　//生成右键菜单
　　$('#tt').tabs({
　　　　onContextMenu: function(e, title, index){
　　　　//让默认事件失效
　　　　e.preventDefault() ;
　　　　//选中标签
　　$('#tt').tabs('select',index);
　　//显示右键菜单
　　$('#mm').menu('show', {
　　　　left: e.pageX,
　　　　top: e.pageY
　　});
　　$("#mm").menu({
　　　　onClick : function (item) {
　　　　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>

<!--关闭选项卡的js end-->

</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-no'">关闭所有</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>

效果图如下：

　　　　

easyUI-右键菜单,关闭选项卡的更多相关文章

  1. jQuery EasyUI 右键菜单--关闭标签/选项卡

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", func ...

  2. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  3. XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)

    实现的需求: 用户习惯是一个不可忽略的东西,默认这版的dx的tab也木有右键操作,但用户习惯操作如浏览器都有右键关闭功能,故这里实现先dx的该功能 技术实现: (1)在winform的相应控件内,拖入 ...

  4. [转][easyui]右键菜单

    来自:Zephyr.Net开发手册 var $tab = $('#tabs'); var currentTab = $tab.tabs('getSelected'); var titles = wra ...

  5. easyui 定义的右键菜单 在 浏览器中 失效.

    使用 火狐 打开 easy ui 开发的网页, 鼠标右键 没有出现 自定义的 easyUI右键菜单, 出现的是鼠标本身的右键菜单. 如果使用ie 则正常. 原因在于我 的火狐使用了解除右键限制 这个脚 ...

  6. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

  7. 为EasyUI 的Tab 标签添加右键菜单

    在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...

  8. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  9. easyui tab上面添加右键菜单

    说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...

随机推荐

  1. 作业调度方案(codevs 1156)

    题目描述 Description 我们现在要利用m台机器加工n个工件,每个工件都有m道工序,每道工序都在不同的指定的机器上完成.每个工件的每道工序都有指定的加工时间. 每个工件的每个工序称为一个操作, ...

  2. 准备 KVM 实验环境

    KVM 是 OpenStack 使用最广泛的 Hypervisor,本节介绍如何搭建 KVM 实验环境 安装 KVM 上一节说了,KVM 是 2 型虚拟化,是运行在操作系统之上的,所以我们先要装一个 ...

  3. Linux下重启就需要重新激活eth0的解决办法（ifup eth0）

    新安装linux系统,网卡不能自动激活去获取ip,每次都需要手工执行以下命令 ifup eth0 后续通过将ONBOOT=yes这句就能开机启动自动激活,就可以解决问题 vim /etc/syscon ...

  4. Tengine的concat模块与js、css合并

    首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想 ...

  5. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  6. django : related_name and related_query_name

    This post is about two Django ForeignKey parameters related_name related_query_name See an example b ...

  7. spring启动时加载字典表数据放入map

    import java.util.HashMap; import java.util.List; import org.springframework.beans.factory.annotation ...

  8. 【spring boot jpa】hql语句报错 ：antlr.NoViableAltException: unexpected token: roleName

    使用场景:在spring data jpa下使用@Query("hql语句") 然后在项目启动的时候报错 hql语句报错:antlr.NoViableAltException: u ...

  9. BUPT复试专题—比较奇偶数(2010)

    https://www.nowcoder.com/practice/188472f474d5421cb8218b8ad561023b?tpId=67&tqId=29636&rp=0&a ...

  10. Thinking in React（翻译）

    下面是React官方文档中的Thinking inReact文章的翻译,第一次翻译英文的文章,肯定有非常多不对的地方,还望多多包涵. 原文地址:https://facebook.github.io/r ...