为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, ...
随机推荐
- PHP疑惑
<?php $a = array(); $a[0] = 1; $a[1] = 2; $b = (object)$a; var_dump($b); 怎么从对象$b 中取值??? <?php ...
- win10使用Composer-Setup安装Composer以及使用Composer安装Yii2最新版
1:下载 ca-bundle.crt和cacert.pem 将这两个文件放在php目录下 2:php.ini中添加上述两个文件的路径 curl.cainfo=C:/xampp/php/ca-bundl ...
- jQuery学习总结（一）
jQuery当中独有的对象:jQuery对象: jQuery对象的缩写形式“$”:所以在使用时,我们都是用$来代替jQuery. 所以我们在页面元素选择或执行功能函数的时候可以这么写:$(functi ...
- C++ 多重集的使用
C++ 多重集的使用 多重集当中的数据映射关系将不是前面的一对一的关系,而是一对多,也就是可以在容器当中插入具有相同key的实例.关于组织方式,LZ进行了下面的大胆的预测. 第一.底层的数据组织方式如 ...
- 【转】移动端viewport的使用
web端网站转移至移动端页面,注意点如下: 1.首先引入viewport调整页面宽度 <meta name="viewport" content="width=de ...
- 对于C++窗口编译一闪而过的解决方法 （DEV CPP下）
对于C++窗口编译一闪而过的解决方法 首先来看一个简单的程序(编译环境为 DEV C++.): #include <iostream> int main() { std:: ...
- 数据库知识整理<四>
使用DML语句更改数据: 所谓DML语句是指数据库操作语句,其中包括的是对数据库数据的修改.删除.插入. 4.1添加新数据: 插入单行的记录:基本的SQL语句为-insert into <表明& ...
- SQL Server 优化器特性导致的内存授予相关BUG
我们有时会遇到一些坑,要不填平,要不绕过.这里为大家介绍一个相关SQL Server优化器方面的特性导致内存授予的相关BUG,及相关解决方式,也顺便回答下邹建同学的相关疑问. 问题描述 一个简单的查询 ...
- [Java Web] 4、JavaScript 简单例子(高手略过)
内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...
- [ACM_几何] UVA 11300 Spreading the Wealth [分金币 左右给 最终相等 方程组 中位数]
Problem A Communist regime is trying to redistribute wealth in a village. They have have decided to ...