YUI의 탭 전환 구현 code_YUI.Ext 관련

탭 전환은 HTML 구조에 의존하지 않아야 디자이너와 프런트엔드 개발자에게 최대한의 유연성을 제공합니다. 원리: 탭 개체는 컨트롤 부분(트리거)과 콘텐츠 부분(시트)으로 구분됩니다. 트리거가 실행되면 해당 시트가 표시됩니다.

Dashu는 이전에 TabControl 코드를 작성했지만 2년이 지난 후에도 여전히 테스트 가능성이 높아 이 아이디어가 실제 요구 사항에 상대적으로 부합했음을 알 수 있습니다. 좀 더 명확해 보일 수 있는 YUI 기반 버전으로 변경했습니다. 먼저 테스트 페이지를 방문하여 전체 자바스크립트 코드를 확인하세요.

참고: 실제 코드로 변경할 때 Tab 클래스를 특정 네임스페이스 아래에 두고 전역 공간에 직접 노출시키지 마세요.

1: 사용
다음은 일반적으로 사용되는 html 구조이지만 이에 국한되지는 않습니다.

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

• t1


• t2


• t3




s1
id=" s2">s2


s3



해당 자바스크립트 코드는 다음과 같습니다. 네 가지 초기화 방법이 모두 가능합니다.

코드 복사 코드는 다음과 같습니다. var tab = new Tab( $D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));//1

var tab = new Tab(['t1 ',' t2', 't3'],['s1','s2', 's3']);//2

var tab = new Tab(['t1','t2','t3' ],[ 's1','s2','s3'],{ TriggerEvent:'mouseover',slideEnabled:true});//3
var tab = new Tab();//4
탭 .add('t1', 's1');
tab.add('t2', 's2')
tab.add('t3', 's3'); ['triggerEvent'] = 'mouseover';
tab.config['slideEnabled'] =
tab.onShow.subscribe(function(t, a){ ...
tab .init( ; 이벤트를 정의합니다.