jQuery Tab 플러그인은 소스 코드 및 자세한 지침과 함께 Tab에 iframe을 표시하는 데 사용됩니다.

작성자: think8848 (회사 홈페이지: http://www.cleversoft.com, QQ: 166156888, 블로그: http://think8848.cnblogs.com) 이 정보는 재인쇄를 위해 보관하시기 바랍니다

CleverTabs는 jQuery 버전: 1.6.1, jQuery UI 스타일 버전: 1.8.13이 필요한 jQuery 플러그인입니다. 해당 기능은 iframe을 표시하기 위한 jQuery UI 스타일 탭을 생성하는 것입니다.

이 예에서는 jQuery.contextMenu 플러그인이 추가되었으며 스타일을 수정하고 jQuery UI 스킨을 사용했습니다

효과는 다음과 같습니다.

jQuery Tab 플러그인은 소스 코드 및 자세한 지침과 함께 Tab에 iframe을 표시하는 데 사용됩니다._jquery
기본 적용 예:
HTML 코드:

Javascript 코드:

코드 복사 코드는 다음과 같습니다.

CleverTabs 모든 탭 컨테이너

코드 복사 코드는 다음과 같습니다.

var tabs; > 

CleverTabs.add 메소드: 새 탭을 추가하고 활성화 상태로 만듭니다. 추가할 URL이 이미 존재하는 경우 탭이 활성화됩니다.

코드 복사 코드는 다음과 같습니다.

CleverTabs.getCurrentTab 메소드:
현재 활성 탭 가져오기

코드 복사

코드는 다음과 같습니다.

 
CleverTabs.getTabByUrl 메소드: 
지정된 URL의 탭 인스턴스 가져오기

코드 복사

코드는 다음과 같습니다.

 
CleverTabs.clear 메소드: 
탭에서 잠금 해제된 탭 모두 닫기 

코드 복사

코드는 다음과 같습니다.

CleverTab.nextTab 메소드:
이 탭 다음에 있는 탭 가져오기

코드 복사 코드는 다음과 같습니다. 🎜>
CleverTab.kill 메소드:
탭에서 탭 이동

코드 복사

코드는 다음과 같습니다.

CleverTab.refresh 메소드:
탭

코드 복사

코드는 다음과 같습니다.

CleverTab.setDisable 메소드:
탭의 비활성화 속성을 true로 설정한 후 탭의 잠금 속성을 자동으로 true로 설정합니다. 🎜>

코드 복사

코드는 다음과 같습니다.
------------------2011.06.27 업데이트------------- -------
"다른 사람을 바꿀 수 없다면 자신만 바꾸세요"
대부분의 경우 현재 페이지는 여러 개의 페이지로 구성될 수 있습니다. 배너, 네비게이터, 콘텐츠 등의 부품 구성. 작업 영역을 더 크게 만들기 위해 배너, 네비게이터 또는 기타 패널이 여러 번 축소(Collapse)되는 문제가 발생합니다. width for the tab. : 80%; height: 90%; 이제 탭의 너비와 높이가 변경되었지만 내부 탭 페이지는 여전히 이전 크기에 따라 표시됩니다. resize 이벤트에는 window만 있고 본문에만 해당되는데 div는 이 이벤트를 지원하지 않습니다. 그들이 어떻게 생각하는지 정말 모르겠습니다... 이전의 CleverTabs에서는 window.resize 이벤트를 바인딩했지만 문제는 다음과 같습니다. 위에 제시한 예에서는 창의 크기가 실제로는 본문도 변화가 없지만 탭의 크기가 변경된 것입니다. 이 경우 기본 tabPenelContainer를 사용하는 경우 처리해야 합니다. 탭의 크기 조정 이벤트가 발생했지만 탭은 단지 div일 뿐인데 크기가 조정될 예정인가요? 어젯밤에 잠자리에 들기 전에 문득 방법이 떠올랐다. '내가 남을 바꿀 수 없다면 나 자신도 바꿀 수 있으니', 그러면 '내가 감당할 수 없는 일은 남이 대신 하게' 할 수 있다. 크기 조정을 "아웃소싱"하는 것은 잊어버리세요. 그래서 원래 코드가 수정되었습니다. CleverTabs 생성자에 resizePanelContainer 함수가 추가되었습니다. 탭 자체는 resize 이벤트가 발생했다는 사실을 몰랐지만 누가 호출했는지 아는 사람이 많죠. 소위 유능한 사람들.
CleverTabs.resizePanelContainer 방법:
CleverTabs의 기본 PanelContainer를 사용할 때 PanelContainer의 크기를 재설정하세요.

코드 복사 코드는 다음과 같습니다.

 
 > 
데모

http://demo.jb51.net/js/2011/CleverTabs/index.htm
소스코드 다운로드 /201106/yuanma/CleverTabs.rar