EasyUI 的Tab 标签添加右键菜单
样式：
主要提供右键功能代码。
(只需要提供你需要的js和css就行了)
<!doctype html>
<html>
<head>
<base href="/smile/" />
<title>标签右键菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="0">
<link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" />
<link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" />
<script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script>
<script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> </head>
<body class="easyui-layout">
<div data-options="region:'west',title:'功能导航菜单',collapsible:false,iconCls:'fa fa-leaf'" style="width: 200px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
<ul class="easyui-tree" data-options="onClick:clickTree">
<li data-options="attributes:{'url':'/smile/html/menu1.html'}"><span>菜单一</span></li>
</ul>
</div>
<div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
<ul class="easyui-tree" data-options="onClick:clickTree">
<li data-options="attributes:{'url':'/smile/html/menu2.html'}"><span>菜单二</span></li>
</ul>
</div>
</div>
</div>
<!--首页 -->
<div data-options="region:'center',collapsible:false">
<div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
<div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">
<div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div>
</div>
</div>
</div>
<!--右键菜单栏 -->
<div id="mm" class="easyui-menu" style="width: 120px;">
<div id="mm-tabclosecurrent" name="1"> 关闭当前页</div>
<div id="mm-tabcloseall" name="2"> 全部关闭</div>
<div id="mm-tabcloseother" name="3"> 其他全部关闭</div>
</div>
<script type="text/javascript">
$(function(){
//监听右键事件，创建右键菜单
$('#mainTabs').tabs({
onContextMenu:function(e, title,index){
e.preventDefault();
if(index>0){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}).data("tabTitle", title);
}
}
});
//右键菜单click
$("#mm").menu({
onClick : function (item) {
closeTab(this, item.name);
}
}); }); function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title,
content: content,
closable: true ,
cache:true,
});
} } // //删除Tabs
function closeTab(menu, type) {
var allTabs = $("#mainTabs").tabs('tabs');
var allTabtitle = [];
$.each(allTabs, function (i, n) {
var opt = $(n).panel('options');
if (opt.closable)
allTabtitle.push(opt.title);
});
var curTabTitle = $(menu).data("tabTitle");
var curTabIndex = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));
switch (type) {
case "1"://关闭当前
$("#mainTabs").tabs("close", curTabTitle);
return false;
break;
case "2"://全部关闭
for (var i = 0; i < allTabtitle.length; i++) {
$('#mainTabs').tabs('close', allTabtitle[i]);
}
break;
case "3"://关闭其他全部
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#mainTabs').tabs('close', allTabtitle[i]);
}
$('#mainTabs').tabs('select', curTabTitle);
break;
} } function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url);
} else {
$(this).tree('toggle', node.target); }
} </script>
</body>
</html>
EasyUI 的Tab 标签添加右键菜单的更多相关文章
- 为EasyUI 的Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...
- 仅在TabControl中的Tab中添加右键菜单
若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...
- 使用easyui为tab页增加右键菜单
在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...
- easyui tab上面添加右键菜单
说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...
- EasyUI-Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 <!doctype html> <html> <head> <meta http-equiv="co ...
- 为jQuery-easyui的tab组件添加右键菜单功能
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...
- 给jquery easy-ui 添加右键菜单
版权声明:转自为EasyUI 的Tab 标签添加右键菜单
- NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback
首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...
- pyqt5-为QListWidget添加右键菜单
如何在pyqt5下为QListWidget添加右键菜单? 能百度到的均是pyqt4下的,有些貌似并不好用. 在尝试了很多方法后,下面贴出可用的方法: from PyQt4 import QtCore, ...
随机推荐
- 夺命雷公狗-----React---21--小案例之心情留言板
这个功能如果是用传统型的jquery来写都要花费很多时间才可以完成的案例, 亲测jquery配合bootstrap来写和bootstrap配合react.js来写,不知不觉中有点震惊... jquer ...
- 利用spring boot创建java app
利用spring boot创建java app 背景 在使用spring框架开发的过程中,随着功能以及业务逻辑的日益复杂,应用伴随着大量的XML配置和复杂的bean依赖关系,特别是在使用mvc的时候各 ...
- 快速排序算法 java 实现
快速排序算法 java 实现 快速排序算法Java实现 白话经典算法系列之六 快速排序 快速搞定 各种排序算法的分析及java实现 算法概念 快速排序是C.R.A.Hoare于1962年提出的一种划分 ...
- 如何让 XE5 发现你的手机
首发在 ① FireMonkey[DELPHI XE5] 165232328 欢迎使用 FMX 开发手机程序的高手来访. 1. 手机开启 USB 调试.不用 ROOT.2. 装驱动.(问题就在这里) ...
- Mac下输入法总是默认中文，怎么设置成英文的？
最近一同事在DreamWeaver里,写CSS样式的时候,默认总是中文,切到别的窗口,再切回来,就变成中文了,总要按一下切换键,时间长了特别烦人. 在网上找了一些方法,最后找到一个有效的. 总结一下就 ...
- python之haproxy配置文件操作（第三天）
作业: 对haproxy配置文件进行操作 要求: 对haproxy配置文件中backend下的server实现增删改查的功能 一.这个程序有二个版本 1. python2.7版本见haproxy_py ...
- webpack模块依赖管理介绍
http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...
- python中函数接收多余参数
代码: def fun(x): return x print fun(10) 函数fun(x)接受参数是x,传入数字"10",打印函数的返回值结果 就是10,如果我传递多个参数时, ...
- 【转】Description Resource Path Location Type Java compiler level&n
转载地址:http://blog.sina.com.cn/s/blog_ae96abfd0101qbq0.html 在项目上右键Properties->Project Facets,在打开的Pr ...
- libevent源码分析：hello-world例子
hello-world是libevent自带的一个例子,这个例子的作用是启动后监听一个端口,对于所有通过这个端口连接上服务器的程序发送一段字符:hello-world,然后关闭连接. /* * gcc ...