How to add a right-click menu to the EasyUI Tab label

Preparatory work in the early stage:
1. Download the DEMO source code and upgrade to the latest version (jquery 1.7.2, Easyui 1.2.6). Just replace it directly. When upgrading easyui, you need to replace all css js theme
2. In the HTML code of the home page: Copy the code

to the following code: < ;div id="mm" class="easyui-menu" style="width:150px;">

Refresh

< div class="menu-sep">

Close all except this

is changed to:

Copy the code The code is as follows:

Refresh

Close all except this

Add a new method in outlook2.js as follows:

Copy the code The code is as follows: function closeTab(action)

{

var alltabs = $('#tabs').tabs('tabs'); 
var currentTab =$('#tabs').tabs(' getSelected'); 
var allTabtitle = []; 
$.each(alltabs,function(i,n){ 
allTabtitle.push($(n).panel('options').title) ; 
}) 
switch (action) { 
case "refresh": 
var iframe = $(currentTab.panel('options').content); 
var src = iframe. attr('src'); 
$('#tabs').tabs('update', { 
tab: currentTab, 
options: { 
content: createFrame(src) 
 } 
}) 
break; 
case "close": 
var currtab_title = currentTab.panel('options').title; 
$('#tabs').tabs(' close', currtab_title); 
break; 
case "closeall": 
$.each(allTabtitle, function (i, n) { 
if (n != onlyOpenTitle){ 
$ ('#tabs').tabs('close', n); 
} 
}); 
break; 
case "closeother": 
var currtab_title = currentTab.panel(' options').title; 
$.each(allTabtitle, function (i, n) { 
if (n != currtab_title && n != onlyOpenTitle) 
{ 
$('#tabs' ).tabs('close', n); 
} 
}); 
break; 
case "closeright": 
var tabIndex = $('#tabs').tabs( 'getTabIndex', currentTab); 
if (tabIndex == alltabs.length - 1){ 
alert('Dear, there is nothing behind it^@^!!'); 
return false; 
 } 
$.each(allTabtitle, function (i, n) { 
if (i > tabIndex) { 
if (n != onlyOpenTitle){ 
$('#tabs'). tabs('close', n); 
} 
} 
}); 
break; 
case "closeleft": 
var tabIndex = $('#tabs'). tabs('getTabIndex', currentTab); 
if (tabIndex == 1) { 
alert('Dear, there's someone in front of you, we can't afford to offend him. ^@^!!'); 
return false; 
} 
$.each(allTabtitle, function (i, n) { 
if (i < tabIndex) { 
if ( n != onlyOpenTitle){ 
$('#tabs').tabs('close', n); 
} 
} 
}); 
break; 
case " exit": 
$('#closeMenu').menu('hide'); 
break; 
} 
} 

 
Change the tabCloseEven method in js to 

Copy code The code is as follows: function tabCloseEven() {

$('# mm').menu({

onClick: function (item) {
closeTab(item.id);
}
});
return false;
}

This is OK, the code is much more elegant than before!
When calling refresh and closing the current tab, call closeTab('action') //action can be refresh (refresh) or close (close)
When used in an iframe, do this top.closeTab('action ');
Click here to download the latest Easyui application example

Related labels：

easyui tab label right click menu

source：php.cn

Previous article：jquery (javascript) automatic serial number and attribute number implementation code_jquery Next article：How to use jqTransform form beautification plug-in_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How to add a right-click menu to the EasyUI Tab label_jquery