转自疯狂秀才:http://www.cnblogs.com/hxling/archive/2010/05/16/jquery-easyui-tab.html
在页面创建右键菜单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>
页面初始化时绑定各种事件
$(function(){
bindTabEvent();
bindTabMenuEvent();
});
//绑定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;
});
}
//绑定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;
});
}
分享到:
相关推荐
Easyui添加Tab右键菜单示例,右键弹出操作菜单,刷新、关闭、全部关闭、关闭左侧、关闭右侧
添加了一个鼠标右键菜单进入,让操作更加鲜明。能满足多种情况
NULL 博文链接:https://xiaofengtoo.iteye.com/blog/1263362
下面小编就为大家带来一篇为jQuery-easyui的tab组件添加右键菜单功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键...
为了操作方便,添加了一个右键菜单进入,也适当的添加了动画,让操作变得圆滑。
用jQuery实现了三种情况下的变灰不可用的效果,当鼠标放到上面点击,右键菜单就会消失,其实解决的办法也很简单,只要在对应的单击事件里重新绑定右键菜单即可,需要的朋友可以参考下
非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定
原生态jsmind没有右键菜单功能,为了操作方便,添加了一个右键菜单进入,同时可实现拖拽操作。
easyui选项卡模仿浏览器的右键关闭功能。 easyui选项卡模仿浏览器的右键关闭功能。
近期研究了下MenuButton,有了新的感悟,原先在那个DEMO中右键支持做法,现在看来真是小儿科啊
jQuery EasyUI 实例演示(菜单、TAB等)! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
下面小编就为大家带来一篇jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
easyui右键设置疑问
easyui tab 绝对好用的tab插件
前台页面包括后台代码,实现了easyui-tree右键增加节点,修改节点,删除节点,包括子节点的操作,并同时更新数据库,动态更新tree
一个利用easyui1.3.5+jquery2.0制作的系统框...本程序在疯狂秀才1.2版本基础上,进行了修改,修正了该版本不支持jquery2.0以上、easyui1.3以上的问题。