>웹 프론트엔드 >JS 튜토리얼 >YUI의 탭 전환 구현 code_YUI.Ext 관련

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

WBOY
WBOY원래의
2016-05-16 18:29:491399검색

탭 전환은 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( ; 이벤트를 정의합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.