使用菜单组件Menu写一个右键菜单

<div id="mm" class="easyui-menu" style="width:120px;">
<div id="mm-tabclosrefresh" data-options="name:6">刷新</div>
<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">
//监听右键事件，创建右键菜单、myTab是我的选项卡的ID
             $('#myTab').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
);
}
});

//删除Tabs
function closeTab(menu, type) {
var allTabs = $("#myTab").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 = $("#myTab").tabs("getTabIndex", $("#myTab").tabs("getTab", curTabTitle));
switch (type) {
case 1:
$("#myTab").tabs("close", curTabIndex);
return false;
break;
case 2:
for (var i = 0; i < allTabtitle.length; i++) {
$('#myTab').tabs('close', allTabtitle[i]);
}
break;
case 3:
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#myTab').tabs('close', allTabtitle[i]);
}
$('#myTab').tabs('select', curTabTitle);
break;
case 4:
for (var i = curTabIndex; i < allTabtitle.length; i++) {
$('#myTab').tabs('close', allTabtitle[i]);
}
$('#myTab').tabs('select', curTabTitle);
break;
case 5:
for (var i = 0; i < curTabIndex-1; i++) {
$('#myTab').tabs('close', allTabtitle[i]);
}
$('#myTab').tabs('select', curTabTitle);
break;
case 6: //刷新
var panel = $("#myTab").tabs("getTab", curTabTitle).panel("refresh");
break;
}
}
</script>

<div id="mm" class="easyui-menu">
<div id="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div
4000
>
<div id="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
<div id="closeAll" data-options="iconCls:'icon-no'">关闭所有</div>
</div>

$('#myTab').tabs({
onContextMenu: function(e, title, index){
e.preventDefault();
//选中标签
$('#myTab').tabs('select',index);
//显示右键菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}) ;
}
});
//为每个菜单绑定点击事件
//关闭选中的标签
$("#closeCurrent").click(function(){
//获取选中的标签索引
var tab = $('#myTab').tabs('getSelected');
var index = $('#myTab').tabs('getTabIndex',tab);
$("#myTab").tabs("close",index);
});
//关闭选中标签之外的标签
$("#closeOthers").click(function(){
//获取所有标签
var tabs = $("#myTab").tabs("tabs");
var length = tabs.length;
//获取选中标签的索引
var tab = $('#myTab').tabs('getSelected');
var index = $('#myTab').tabs('getTabIndex',tab);
//关闭选中标签之前的标签
for(var i=0;i<index;i++){
$("#myTab").tabs("close",0);
}
//关闭选中标签之后的标签
for(var i=0;i<length-index-1;i++){
$("#myTab").tabs("close",1);
}
});
//关闭所有标签
$("#closeAll").click(function(){
var tabs = $("#myTab").tabs("tabs");
var length = tabs.length;
for(var i=0;i<length;i++){
$("#myTab").tabs("close",0);
}
});