예제 코드에서는 jquery easyui 동적 탭 page_jquery를 설명합니다.

jQuery EasyUI를 사용하면 탭을 쉽게 추가할 수 있습니다. 'add' 메소드를 호출하기만 하면 됩니다.

function addTab(title, href,icon){ 
  var tt = $('#tabs'); 
  if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab     
    tt.tabs('select', title); 
    refreshTab({tabTitle:title,url:href}); 
  } else { 
    if (href){ 
      var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; 
    } else { 
      var content = '未实现'; 
    } 
    tt.tabs('add',{ 
      title:title, 
      closable:true, 
      content:content, 
      iconCls:icon||'icon-default' 
    }); 
  } 
} 
/**   
 * 刷新tab 
 * @cfg 
 *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
 *如果tabTitle为空，则默认刷新当前选中的tab 
 *如果url为空，则默认以原来的url进行reload 
 */ 
function refreshTab(cfg){ 
  var refresh_tab = cfg.tabTitle&#63;$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); 
  if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
  var _refresh_ifram = refresh_tab.find('iframe')[0]; 
  var refresh_url = cfg.url&#63;cfg.url:_refresh_ifram.src; 
  //_refresh_ifram.src = refresh_url; 
  _refresh_ifram.contentWindow.location.href=refresh_url; 
  } 

위 코드는 간단하고 이해하기 쉽습니다. 궁금한 점이 있으면 메시지를 남겨주세요.

ps: jQuery Easyui의 탭 플러그인에는 탭(탭)에 콘텐츠를 로드하는 두 가지 방법, 즉 "href 원격 요청"과 "콘텐츠 로컬 콘텐츠"가 있습니다.

둘의 특징:

href 모드에서 데이터 로드 특성:

로드된 페이지의 body 요소 내부 콘텐츠만 로드됩니다. 즉, jQuery의 ajax 요청은 html 조각만 로드됩니다.
원격 URL을 로드할 때 마스킹 효과, 즉 "대기 중..." 효과가 있어 더 나은 사용자 경험을 제공합니다.
로드된 페이지의 레이아웃이 복잡하거나 실행해야 할 js 스크립트가 많은 경우 코딩에 주의가 필요한 경우가 많아 문제가 발생하기 쉽습니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

콘텐츠 로딩 데이터 기능:

더 유연하게 스크립트에 HTML 코드를 입력한 다음 탭의 콘텐츠 속성에 할당할 수 있습니다. 그러나 이렇게 작성하면 코드 읽기가 어려워집니다.
콘텐츠에 iframe을 할당할 수 있으며 iframe을 삽입하여 수행할 수 없는 일은 없습니다.
iframe을 사용하면 클라이언트 js가 반복적으로 로드되어 리소스가 낭비됩니다. 예를 들어 메인 페이지에서 easyui 라이브러리를 참조해야 한다면 iframe도 이를 참조해야 하므로 낭비가 발생합니다.