jQuery EasyUI 레이아웃은 tabs_jquery를 동적으로 추가합니다.

다음 내용을 읽기 전에 easyui 관련 지식에 대해 간략하게 소개하겠습니다.

easyui는 jQuery를 기반으로 한 사용자 인터페이스 플러그인 모음입니다. dd

easyui는 최신 대화형 JavaScript 애플리케이션을 만드는 데 필요한 기능을 제공합니다.

easyui를 사용하면 많은 코드를 작성할 필요가 없으며 사용자 인터페이스를 정의하기 위해 몇 가지 간단한 HTML 태그만 작성하면 됩니다.

easyui는 HTML5 웹페이지를 완벽하게 지원하는 완전한 프레임워크입니다.

easyui는 웹 개발 시간과 규모를 줄여줍니다.

easyui는 매우 간단하지만 강력합니다.

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

이 튜토리얼에서는 iframe을 사용하여 페이지에 나타나는 탭을 동적으로 추가합니다. 추가 버튼을 클릭하면 새로운 탭이 추가됩니다. 탭이 이미 존재하는 경우 활성화됩니다.

1단계: 탭 만들기

 <div style="margin-bottom:10px">
 <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
 </div>
 <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
 <div title="Home">
 </div>
 </div>

이 HTML 코드는 매우 간단합니다. 'Home'이라는 탭 패널을 사용하여 탭을 만듭니다. js 코드를 작성할 필요가 없다는 점에 유의하세요.

2단계: 'addTab' 기능 구현

 function addTab(title, url){
 if ($('#tt').tabs('exists', title)){
  $('#tt').tabs('select', title);
 } else {
  var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
  $('#tt').tabs('add',{
  title:title,
  content:content,
  closable:true
  });
 }
 }

'exists' 메소드를 사용하여 탭이 이미 존재하는지 확인하고, 이미 존재하는 경우 탭을 활성화합니다. 존재하지 않는 경우 'add' 메소드를 호출하여 새 탭 패널을 추가하십시오.

자, 이번 튜토리얼은 모두에게 도움이 되기를 바랍니다.