为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, ...
随机推荐
- Android中轴旋转特效实现，制作别样的图片浏览器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10766017 Android API Demos中有很多非常Nice的例子,这些例 ...
- 从nib文件里加载collectionViewCell
如何取出在xib文件里绘制的collectionViewCell ? 1.获得nib文件 UINib *nib = [[UINib NibWithName:@"xib文件的名字"] ...
- JDBC学习笔记（1）
说明:本系列学习笔记主要是学习传智播客的李勇老师的教学课程和一本英文电子书<JDBC Recipes A Problem-Solution Approach>所作的笔记. 1,什么是JDB ...
- 技术文档--svn
1.什么是版本控制,说出常见的版本控制系统及其区别版本控制它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编 ...
- Linux内核--网络栈实现分析（一）--网络栈初始化
本文分析基于内核Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7488828 更多请看专栏, ...
- 网络闪段致slave 出错分析
告警信息 check_ins_slave_io_running (err_cnt:1)critical- slaveio not run on ins:3014,3051,3060,3079,309 ...
- Javascript开发之工具归纳
写在前面 由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架.工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了.社区的力量果然强大---也是由此 ...
- 转载：开发者眼中最好的 22 款 GUI 测试工具
对于很多同学来说gui程序的测试是一个难点,所以我从网上转载了一篇关于gui测试的一篇文章,里面罗列的很多工具,大家可以尝试一下学习学习. 英文原文:22 best GUI testing tools ...
- Android开发学习总结（六）—— APK反编译
学习和开发Android应用有一段时间了,今天写一篇博客总结一下Android的apk文件反编译.我们知道,Android应用开发完成之后,我们最终都会将应用打包成一个apk文件,然后让用户通过手机或 ...
- [ucgui] 对话框4——模式消息窗口
>_<" 这里实现点击灰色窗口的按钮出现一个模式消息窗口,点击OK之后才能再聚焦到灰窗口:点击灰窗口除了按钮的地方,弹出一个非模式窗口.