您的位置:首页 > 产品设计 > UI/UE

EasyUI基本使用——(tabs右键菜单)

2015-07-12 00:02 531 查看
本文只记录一些使用要点代码段,非使用教程。

tab上加右键菜单

$.fn.contextMenus=function(){
var $tabs=$(this);

var temphtml='<div id="tabs-contextmenuparent"><div id="tabs-contextmenu" 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></div>';
$("body").append(temphtml);
$.parser.parse($('#tabs-contextmenuparent'));
var $menus=$("#tabs-contextmenu");
$(document).on("dblclick",".tabs-inner",function(){
var currtab_title = $(this).children("span").text();
var $link=$(".tabs-title:contains("+currtab_title+")",$tabs);
if($link.is('.tabs-closable')){
$tabs.tabs('close',currtab_title);
}
});
$(document).on("contextmenu",".tabs-inner",function(e){

$menus.menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle =$(this).children("span").text();
$menus.data("currtab",subtitle);
return false;

});
//关闭当前
$('#mm-tabclose',$menus).click(function() {
var currtab_title = $menus.data("currtab");
var $link=$(".tabs-title:contains("+currtab_title+")",$tabs);

if ($link.is('.tabs-closable')) {
$tabs.tabs('close', currtab_title);
}
});
//全部关闭
$('#mm-tabcloseall',$menus).click(function() {
$('.tabs-inner span',$tabs).each(function(i, n) {
if ($(this).is('.tabs-closable')) {
var t = $(n).text();
$tabs.tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother',$menus).click(function() {
var currtab_title = $('tabs-contextmenu').data("currtab");
$('.tabs-inner span').each(function(i, n) {
if ($(this).is('.tabs-closable')) {
var t = $(n).text();
if (t != currtab_title)
$tabs.tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright',$menus).click(function() {
var currtab_title = $('tabs-contextmenu').data("currtab");
var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent();
var nextall = $li.nextAll();

if (nextall.length == 0) {
jAlert('已经是最后一个了');
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',$menus).click(function() {
var currtab_title = $menus.data("currtab");
var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent();

var prevall =$li.prevAll();
if (prevall.length == 1) {
jAlert('已经是第一个了');
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;
});
};


使用方法:

首先定义tabs

$('#div-tabs').tabs({

});


然后使用

$("#div-tabs").contextMenus();


即可。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: