EasyUI 탭 label_jquery에 마우스 오른쪽 버튼 클릭 메뉴를 추가하는 방법

WBOY

풀어 주다： 2016-05-16 17:52:01

원래의

1377명이 탐색했습니다.

초기 준비 작업:
1. DEMO 소스 코드를 다운로드하고 최신 버전(jquery 1.7.2, Easyui 1.2.6)으로 업그레이드하면 됩니다. easyui 업그레이드 시 CSS를 모두 교체해야 합니다. js 테마
2. 홈 페이지의 HTML 코드에서:

코드를 다음 코드에 복사합니다: < ; div id="mm" class="easyui-menu" style="width:150px;">

새로 고침

="menu-sep">

닫기

모두 닫기< ;/div>

이 항목을 제외한 모두 닫기

코드 복사

코드는 다음과 같습니다.

새로고침

닫기

이 항목을 제외한 모두 닫기

현재 페이지 오른쪽 모두 닫기

현재 페이지 왼쪽 모두 닫기< ;/div>

종료

다음과 같이 outlook2.js에 새 메서드를 추가합니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

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, 
옵션: content: createFrame(src) 
 } 
}) 
break; 
case "close": 
var currtab_title = currentTab.panel('options').title; '#tabs').tabs(' close', curtab_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('이봐, 뒤에는 아무것도 없습니다^@^!!' ); 
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('형, 앞에 사람이 있어서 못 가요. 그를 화나게 할 여유가 있습니다. ^@^!!'); 
false 반환 
} 
$.each(allTabtitle, function (i, n) { 
if (i < tabIndex) { 
if ( n != onlyOpenTitle){ 
$('#tabs').tabs('close', n) 
} 
} 
}); exit": 
$('#closeMenu').menu('hide'); 
break; 
} 
} 

 
js의 tabCloseEven 메소드를 다음으로 변경합니다. 




코드 복사


 코드는 다음과 같습니다.

 

function tabCloseEven() {
$ ('# mm').menu({
onClick: 함수(항목) {

closeTab(item.id); } }) return false;
괜찮습니다. 코드가 이전보다 훨씬 우아해졌습니다!
새로 고침을 호출하고 현재 탭을 닫을 때 closeTab('action')을 호출합니다. //action은 새로 고침(refresh) 또는 닫기(close)일 수 있습니다.
iframe에서 사용하는 경우 top.closeTab('action ');
최신 Easyui 애플리케이션 예제를 다운로드하려면 여기를 클릭하세요