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

작성자: 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 스킨을 사용했습니다

효과는 다음과 같습니다.

기본 적용 예:
HTML 코드:

Javascript 코드:

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

CleverTabs 모든 탭 컨테이너

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

var tabs; >


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

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

tabs.add({

//탭에 있어야 함
id 내의 고유 ID: 'uniqueId',
// iframe의 src 속성에 설정할 값
url: 'iframe.src',
//Tab 헤더에 표시되는 텍스트
label: 'tab header',
// 이 탭을 닫을 때 새로 고쳐야 할 탭의 URL(기본값: null)
closeREfresh: 'tab url',
//이 탭을 닫을 때 필수 활성화된 탭의 URL(기본값: null)
closeActivate: 'tab url',
//이 탭을 닫을 때 실행해야 하는 콜백 함수
callback: function () { /*do Something*/ }
})



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

코드 복사

코드는 다음과 같습니다.var tabs = ('#tabs').cleverTabs( ) var tab = tabs.getCurrentTab();

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

코드 복사

코드는 다음과 같습니다. var tab = tabs.getTabByUrl('http://www.jb51.net')

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

코드 복사

코드는 다음과 같습니다.

CleverTab.deactivate 메소드:
탭 페이지를 비활성화하지만 코드에서는 사용하지 않는 것이 좋습니다.
CleverTab.prevTab 메소드:
이전 탭 탭

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

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

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

var tabs = ('#tabs').cleverTabs ();

var tab = tabs.getTabByUrl('http://www.jb51.net')
var prevTab = tab.nextTab()
🎜>
CleverTab.kill 메소드:
탭에서 탭 이동

코드 복사

코드는 다음과 같습니다. var tabs = ('#tabs').cleverTabs() var tab = tabs.getTabByUrl('http:// www.jb51.net');

tab.kill();

CleverTab.refresh 메소드:
탭

코드 복사

코드는 다음과 같습니다.var tab = tabs.getTabByUrl('http://www.jb51.net')

tab.refresh();

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

코드 복사

코드는 다음과 같습니다.var tab = tabs.getTabByUrl('http://www.jb51.net') //매개변수 true가 비활성화되었습니다. tab.setDisable(true)를 활성화하기 위해 false 또는 값이 제공되지 않음

CleverTab.setLock 메서드:
탭의 잠김 속성 설정 .lock을 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