为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, ...
随机推荐
- msyql 数据库恢复相关
通过bin日志恢复数据 一.通过bin日志生成 sql #/usr/local/mysql/bin/mysqlbinlog -d dbname --base64-output=DECODE-ROWS ...
- STL源码--iterator和traits编程技法
第一部分 iterator学习 STL iterators定义: 提供一种方法,使之能够依序巡访某个聚合物(容器)所含的各个元素,而又无需暴露该聚合物的内部表达方式. 任何iteartor都应该提供5 ...
- 河南省第六届ACM程序设计大赛
C: 最舒适的路线 (并查集) #include<cstdio> #include<cstring> #include<iostream> #include< ...
- Linux内核--网络栈实现分析（一）--网络栈初始化
本文分析基于内核Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7488828 更多请看专栏, ...
- plsql基础
语法:declare-->声明变量 begin-->执行部分 exception-->异常 end-->结束 / 最简单的程序:begin null; end; 输出语句:DB ...
- 记一次SQLServer数据库误删数据找回
昨天 同事在本机清理数据库表时,连接到了生产机,误删了二十几张表,幸好是晚上加班的时候删除的,生产机上当时是一天一备份,还原备份是最后的策略,最关键的还是要找回数据. ...
- WPF ToolKit Chart 自定义样式
1.引用:WPFToolkit.dll, System.Windows.Controls.DataVisualization.Toolkit.dll 2. 页面代码参考如下: <UserCont ...
- zlib的安装
wget http://www.zlib.net/zlib-1.2.8.tar.gz tar -zxvf zlib-1.2.8.tar.gz cd zlib-1.2.8 ./configure mak ...
- 作业七：团队项目——Alpha版本冲刺阶段
本次作业为期三周时间,要求各组结合所选项目并阅读教材<构建之法>第六章内容,完成项目的Alpha版本.本阶段的主要内容如下:(20分) 1． 每天组织一次站立会议,讨论每个成员的昨天进 ...
- Shell 判断
1 shell 的$! ,$?, $$,$@ $n $1 the first parameter,$2 the second... $# The number of co ...