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以基础类库
Java以基础类库JFC(Java Foundation Class)的形式为程序员提供编程接口API,类库中的类按照用途归属于不同的包中. (一)java.lang包 Java最常用的包都属于该包, ...
- linux命令行中单个减号表示标准输入输出流
tar cvf - /src/myprojectsrc 这里本来是要输出到一个.tar文件的,目标.tar文件应该放在上面命令的减号处,因此这里的减号表示标准输出流. 减号单独作为命令行参数时,是标准 ...
- zw版·Halcon与delphi(兼谈opencv)
zw版·Halcon与delphi(兼谈opencv) QQ群 247994767(delphi与halcon) <Halcon与delphi>系列,早两年就想写,不过一方面,因为Halc ...
- delphi 图像旋转
网络搜集的 觉得有用的拿去吧 速度不错呢 //旋转90° procedure Rotate(Bitmap: TBitmap); type THelpRGB = packed record rgb: ...
- 关于MySQL相关的查看显示信息：
关于MySQL相关的查看显示信息: 数据库范围: 一.查看所有的数据库:(仅仅是看数据库数量与名字) mysql> show databases; 二.查看某个数据库的创建信息:(主要看数据库的 ...
- ArcGIS10.1 发布气温插值GP服务
首先通过ModelBuilder 工具 构建模型 然后通过模块右键 设置输入参数 或者直接将一个模块设为输入参数 在输出模块的右键属性上 可以设置lyr文件用于渲染 设置数据添加到显示用于不是发布的时 ...
- jeesz源码下载
大型分布式企业架构 jeesz,百度去搜索jeesz
- Android 获取渠道名称
直接看代码, //获取渠道名称public static String getChannelName(Activity ctx) { if (ctx == null) { return null; } ...
- weboffice控件使用不能嵌入网页
var s = ""s += "<object id=WebOffice1 height=586 width='100%' style='LEFT: 0px; TO ...
- 【转】Source Insight的Alt + W键不能使用的解决办法
转载地址:http://velep.com/archives/607.html 对于Source Insight 3.5,习惯于使用Alt + W组合键并配合数字键来切换文件窗口,带来无比的便利.但是 ...