easyui-tab 加载右键菜单
2015-07-07 11:45
639 查看
参考出处：http://blog.csdn.net/s1234567_89/article/details/9240177
第一种方法：此种方法live IE不支持
<span style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; white-space: normal; ">在页面创建右键菜单html</span>
[html] view
plaincopy
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">关闭全部</div>
<div id="mm-tabcloseother">关闭其他</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">关闭右侧标签</div>
<div id="mm-tabcloseleft">关闭左侧标签</div>
</div>
页面初始化时绑定各种事件
[html] view
plaincopy
$(function(){
bindTabEvent();
bindTabMenuEvent();
});
Java代码
[html] view
plaincopy
//绑定tab的双击事件、右键事件
function bindTabEvent(){
$(".tabs-inner").live('dblclick',function(){
var subtitle = $(this).children("span").text();
if($(this).next().is('.tabs-close')){
$('#tabs').tabs('close',subtitle);
}
});
$(".tabs-inner").live('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
Js代码
[html] view
plaincopy
//绑定tab右键菜单事件
function bindTabMenuEvent() {
//关闭当前
$('#mm-tabclose').click(function() {
var currtab_title = $('#mm').data("currtab");
if ($(this).next().is('.tabs-close')) {
$('#tabs').tabs('close', currtab_title);
}
});
//全部关闭
$('#mm-tabcloseall').click(function() {
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#tabs').tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function() {
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#tabs').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function() {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
alert('已经是最后一个了');
return false;
}
nextall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function() {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 1) {
alert('已经是第一个了');
return false;
}
prevall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
}
第二种方法
出处：http://www.cnblogs.com/yeminglong/p/3745914.html
但是方法比较繁琐
2014-205-26完善menu剩下的功能 修改 closeTab function 如下
添加一个刷新
第三种方法
出处：http://blog.csdn.net/liuzheng2684/article/details/7196990
兼容且方便
加入了右击TAB选项卡时显示关闭的上下文菜单
具体实现代码：
右键菜单 HTML:
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
</div>
下面是js代码：
$(function(){
tabClose();
tabCloseEven();
})
function tabClose()
{
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
})
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven()
{
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#tabs').tabs('close',t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
}
第一种方法：此种方法live IE不支持
<span style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; white-space: normal; ">在页面创建右键菜单html</span>
[html] view
plaincopy
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">关闭全部</div>
<div id="mm-tabcloseother">关闭其他</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">关闭右侧标签</div>
<div id="mm-tabcloseleft">关闭左侧标签</div>
</div>
页面初始化时绑定各种事件
[html] view
plaincopy
$(function(){
bindTabEvent();
bindTabMenuEvent();
});
Java代码
[html] view
plaincopy
//绑定tab的双击事件、右键事件
function bindTabEvent(){
$(".tabs-inner").live('dblclick',function(){
var subtitle = $(this).children("span").text();
if($(this).next().is('.tabs-close')){
$('#tabs').tabs('close',subtitle);
}
});
$(".tabs-inner").live('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
Js代码
[html] view
plaincopy
//绑定tab右键菜单事件
function bindTabMenuEvent() {
//关闭当前
$('#mm-tabclose').click(function() {
var currtab_title = $('#mm').data("currtab");
if ($(this).next().is('.tabs-close')) {
$('#tabs').tabs('close', currtab_title);
}
});
//全部关闭
$('#mm-tabcloseall').click(function() {
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#tabs').tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function() {
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#tabs').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function() {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
alert('已经是最后一个了');
return false;
}
nextall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function() {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 1) {
alert('已经是第一个了');
return false;
}
prevall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
}
第二种方法
出处：http://www.cnblogs.com/yeminglong/p/3745914.html
但是方法比较繁琐
<!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" 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>
<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", curTabTitle);
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", curTabTitle);
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;
}
}第三种方法
出处：http://blog.csdn.net/liuzheng2684/article/details/7196990
兼容且方便
加入了右击TAB选项卡时显示关闭的上下文菜单
具体实现代码：
右键菜单 HTML:
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
</div>
下面是js代码：
$(function(){
tabClose();
tabCloseEven();
})
function tabClose()
{
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
})
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven()
{
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#tabs').tabs('close',t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- error: stable identifier required, but $iwC.this.$VAL4.sqlContext found.
- android&nbsp;UI&nbsp;推荐
- android项目中values中几个文件的…
- iOS8中的UIAlertController
- 拉伸图片的时候怎么才能让图片不变形
- Arduino的串口
- 同一个UILabel使用不同的大小和颜色
- iOS 8 UI布局 AutoLayout及SizeClass(二)
- java学习12--其他流程控制结构：break和continue
- vc ListControl设置checkbox风格，时owerdata不能设置为true---m_list.SetItemText()m_list.SetItemData()有关
- UIView 的旋转与缩放以及同时应用两种效果及应用
- 从request获取各种路径总结 request.getRealPath("url"); // 虚拟目录映射为实际目录 request.getRealPat
- quickSort
- Java break [flag]； 与continue [flag]; 区别
- IOS-UICollectionViewLayout
- [SoapUI] 通过Groovy写文本文件
- easyui 中datagrid获取选中行的行号
- Leetcode 232 Implement Queue using Stacks 和 231 Power of Two
- [LeetCode] Implement Queue using Stacks 用栈来实现队列
- JAVA 中 CharSequence 类型