为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, ...
随机推荐
- JS初级-作用域
作用域:域:空间.范围.区域--作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器 ...
- iOS圆形图片裁剪，以及原型图片外面加一个圆环
废话不多说,直接上代码 #import "ViewController.h" @interface ViewController () @property (nonatomic,s ...
- redis-cli 命令总结
redis-cli 命令总结 Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用.在编程时,比如使用Redis 的Java语言包,这 ...
- [SmartFoxServer概述]SFS2X栈平台
SmartFoxServer 2X 栈平台 在这有一张SmartFoxServer 2X平台的鸟瞰图,接下来会简要介绍栈中的每个组件. 首先是服务器的核心——网络引擎(代号BitSwarm),它是用以 ...
- 关于eclipse在线下载安装android SDK没反应解决方法
虽然天朝将google这个服务器给和谐掉了 虽然我们也可以选择其他各类FQ软件 虽然你可能有其他手段解决 不过我还是要提供一个参考方法: 具体操作方式: 点击桌面左下角开始菜单中的搜索,把以下路径,复 ...
- berkeley db replica机制 - 主从同步
repmgr/repmgr_net.c, __repmgr_send(): 做send_broadcast, 然后根据policy 对DB_REP_PERMANENT的处理 __repmgr_send ...
- Debian 8 最小化系统安装muduo
最近开始学习陈硕的muduo C++ Linux多线程网络库,首先当然是要安装.其间遇到过不少问题,最后不能说都解决了,只能说找到了一条不会遇到什么问题的路线.总结起来是两点: 注意各软件之间要版本匹 ...
- 工具武装的前端开发工程师 Mac 软件清单
Awesome Mac 这个仓库主要是收集非常好用的Mac应用程序.软件以及工具,主要面向开发者和设计师.有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章<工具武装的前端开发工程 ...
- Asp.Net Web API 2第九课——自承载Web API
前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html Asp.Net Web A ...
- .net 架构师/经理招聘，长期有效
岗位职责: 1.参与项目的需求分析和业务评审 2.负责项目的技术架构: 3.负责指导开发小组完成开发以及单元测试: 4.负责解决开发人员的技术问题,并对开发人员的代码进行Review. 任职要求: 1 ...