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, ...
随机推荐
- java compiler level does not match the version of the installed java project facet
Java compiler level does not match the version of the installed java project facet错误的解决 因工作的关系,Eclip ...
- Asp.net在IE10、IE11下事件丢失经验总结
asp.net4.0出生得比IE10早,所以asp.net4.0以前版本不认识IE10 的 User-Agent 标头,导致的后果就是ASP.NET 特定功能失效,例如:页面报错__doPostBac ...
- JAVA中的异常及处理异常的方法
异常 这是我老师的喜好:就是说一上来就拿一张图给大家看看,过过瘾-_- 这是一张: 异常分类图 来,这里还有一张带中文的常见异常截图!!! 1:先来说说什么是异常吧: 其实就是"阻止当前方法 ...
- 缓解 SQL Server has encountered 727 occurrence(s) of I/O requests taking longer than 15 seconds
sql server 会记录IO等待时间超过15 seconds的请求,这时application会有 time out 现象,dba需要判断是workload,concurrecy 所致还是sql ...
- WebSphere MQ Explorer的sqlserver的jdbc
一.IBM WebSphere MQ7.0的jdbc支持数据库有: DB2 Informix Informix_With_Date_Format Microsoft_SQL_Server Oracle ...
- Jmeter从数据库获取数据当做变量，传递给其他接口
1.添加JDBC Request 2.JDBC的配置,Variable名字和之前的数据库配置的名字一致,生成的变量放在下面的Variable name
- discuz教程：discuz模板js与jQuery冲突的解决方案
今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...
- 如何运用CSS写小三角
<html> <div class="con"></div> </html> <style> .con{width:0; ...
- python画图设置坐标轴大小
在console端输入python语句,会一句输一行,而且不保留你所做的操作,但是每一句之间加一个分号就能很好的解决. import pylab as Plot Plot.xlim(-150, 150 ...
- IOS8解决获取位置坐标信息出错（Error Domain=kCLErrorDomain Code=0）(转)
标题:IOS8解决获取位置坐标信息出错(Error Domain=kCLErrorDomain Code=0) 前几天解决了在ios8上无法使用地址位置服务的问题,最近在模拟器上调试发现获取位置坐标信 ...