为EasyUI 的Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群：15129679
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>tabs 右键菜单demo QQ：15129679</title>
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="static/js/zTree/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/js/zTree/jquery.ztree.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height: 60px; padding: 10px">
tabs 右键菜单demo QQ：15129679</div>
<div data-options="region:'west',split:true,title:'操作菜单'" style="width: 150px; padding: 10px;">
<ul id="webMenu_list" class="ztree" style="display: ;">
</ul>
</div>
<div data-options="region:'center',title:'',border:false">
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="首页" style="padding: 20px;">
<h3>
欢迎您来到网站信息管理系统<br>
我的博客地址:http://www.cnblogs.com/yeminglong/p/3745914.html </h3>
</div>
</div>
</div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="mm-tabclose" data-options="name:1">关闭</div>
<div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
<div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div> </div>
<script type="text/javascript"> //添加Tabs
function addTabs(event, treeId, treeNode, clickFlag){
if(!$("#tt").tabs('exists', treeNode.name)){
$('#tt').tabs('add',{
id:treeId,
title: treeNode.name,
selected: true,
href:treeNode.dataurl,
closable:true
});
}else $('#tt').tabs('select',treeNode.name);
} //删除Tabs
function closeTab(menu, type){
var allTabs = $("#tt").tabs('tabs');
var allTabtitle = [];
$.each(allTabs,function(i,n){
var opt=$(n).panel('options');
if(opt.closable)
allTabtitle.push(opt.title);
}); switch (type){
case 1 :
var curTabTitle = $(menu).data("tabTitle");
$("#tt").tabs("close", curTabTitle);
return false;
break;
case 2 :
for(var i=0;i<allTabtitle.length;i++){
$('#tt').tabs('close', allTabtitle[i]);
}
break;
case 3 : break;
case 4 : break;
case 5 : break;
} } $(document).ready(function () {
//监听右键事件，创建右键菜单
$('#tt').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);
}
});
//treeNodes
var zNodes = [
{ id:1, pId:0, name:"操作菜单", open:true,url:"",click:false},
{ id: 11, pId: 1, name: "杨凌现代农业科技创业网", dataurl: "02.html", target: "_self" },
{ id: 12, pId: 1, name: "杨凌外贸农产品质量溯源公共服务平台", dataurl: "02.html", target: "_self" },
{ id: 13, pId: 1, name: "华县农产品标准化生产溯源管理系统华县农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" },
{ id: 14, pId: 1, name: "杨陵区科技局", dataurl: "02.html", target: "_self" },
{ id: 15, pId: 1, name: "杨陵区农民专业合作社联合会", dataurl: "02.html", target: "_self" },
{ id: 16, pId: 1, name: "杨凌农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" },
{ id: 17, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" },
{ id: 18, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" }
]; var setting = {
view: {
selectedMulti: false
},
callback: {
onClick: addTabs
}
}; $.fn.zTree.init($("#webMenu_list"), setting,zNodes); });
</script>
</body>
</html>
2014-205-26完善menu剩下的功能 修改 closeTab function 如下
//删除Tabs
function closeTab(menu, type) {
var allTabs = $("#tt").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 = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
switch (type) {
case 1:
$("#tt").tabs("close", curTabIndex);
return false;
break;
case 2:
for (var i = 0; i < allTabtitle.length; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
break;
case 3:
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
case 4:
for (var i = curTabIndex; i < allTabtitle.length; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
case 5:
for (var i = 0; i < curTabIndex-1; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
} }
添加一个刷新
<div id="mm" class="easyui-menu" style="width: 120px;">
<div id="mm-tabclose" name="6">
刷新</div>
<div id="Div1" name="1">
关闭</div>
<div id="mm-tabcloseall" name="2">
全部关闭</div>
<div id="mm-tabcloseother" name="3">
除此之外全部关闭</div>
<div class="menu-sep">
</div>
<div id="mm-tabcloseright" name="4">
当前页右侧全部关闭</div>
<div id="mm-tabcloseleft" name="5">
当前页左侧全部关闭</div>
</div>
//删除Tabs
function closeTab(menu, type) {
var allTabs = $("#tt").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 = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
switch (type) {
case 1://关闭当前
$("#tt").tabs("close", cutTabIndex);
return false;
break;
case 2://全部关闭
for (var i = 0; i < allTabtitle.length; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
break;
case 3://除此之外全部关闭
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
case 4://当前侧面右边
for (var i = curTabIndex; i < allTabtitle.length; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
case 5: //当前侧面左边
for (var i = 0; i < curTabIndex - 1; i++) {
$('#tt').tabs('close', allTabtitle[i]);
}
$('#tt').tabs('select', curTabTitle);
break;
case 6: //刷新
var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
break;
} }
如果这篇文章对您有帮助，您可以打赏我
为EasyUI 的Tab 标签添加右键菜单的更多相关文章
- EasyUI 的Tab 标签添加右键菜单
样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...
- 仅在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, ...
随机推荐
- 基本套接字编程（1） -- tcp篇
1. Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机 ...
- oracle decode(nvl(estimate_qty,0),0,1,estimate_qty) 函數
oracle decode(nvl(estimate_qty,0),0,1,estimate_qty) 函數
- Zabbix_agent的安装配置
在Linux上安装zabbix agent 安装 [root@agtest ~]# yum install http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_6 ...
- Sublime Text3开发工具安装emmet插件
第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...
- 【原创】“借贷宝”砸钱，邀请码 GZZKZK2 (注册成功每人可得20现金，可直接提现）。。。而这只是开始
作为IT/互联网资深码农的我,从专业技术角度剖析其流程,确认其各个环节控制严格,无欺诈嫌疑, 最佳运气邀请码 : GZZKZK2, 你在注册时值得拥有, 无邀请码无奖励, 亲一定要记住.对 APP操作 ...
- Dynamic CRM 2013学习笔记（十二）实现子表合计（汇总，求和）功能的通用插件
上一篇 Dynamic CRM 2013学习笔记(十一)利用Javascript实现子表合计(汇总,求和)功能 , 介绍了如何用js来实现子表合计功能,这种方法要求在各个表单上添加js方法,如果有很多 ...
- Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定)
导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html. 本文主要来讲解以下内容: ...
- Asp.Net Web API 2第十五课——Model Validation(模型验证)
前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文参考链接文章地址htt ...
- C++11 并发指南系列
本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...
- 使用七牛云存储实现Android的自动更新
为了修复Bug或更新软件,我们通常需要实现自动更新,没有哪一个牛逼的人能够搞到每一个用户的机子去帮他们更新. 1.自动更新的流程 我们将了解一下自动更新的思路.既然软件要自动更新,那么它必须知道自己是 ...