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

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

Close all except this

< ;/div>

Close all on the right side of the current page

Close all on the left side of the current page Close

Exit

is changed to:

Copy the code The code is as follows:

Refresh

Close

Close all except this

Close all on the right side of the current page

Close all on the left side of the current page

Exit

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

Statement：

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

Previous article：jquery (javascript) automatic serial number and attribute number implementation code_jqueryNext article：jquery (javascript) automatic serial number and attribute number implementation code_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills