Button Tab (Button Div를 이용한 탭화면 구성하는 함수)

샘플개요

Button과 Div를 이용하여 Tab과 같은 화면을 동적으로 구성하는 예제입니다.

탭버튼 클릭 시 해당 Div가 활성화 되도록 구성되어있습니다.

닫기 버튼 클릭 시 해당 탭버튼과 Div가 삭제되도록 구성되어 있습니다.

탭버튼을 한페이지에 보여주기 힘들 경우 이전/다음버튼으로 이동 할 수 있도록 구성되어 있습니다.

Button Tab 실행 예시

사용방법

1. 제공된 파일

buttontab.xfdl - Button Tab을 만들기 위한 컴포넌트 배치와 스크립트가 포함되어 있습니다.

buttontab_inner01.xfdl - Button Tab에 연결될 첫번째 Form 파일입니다.

buttontab_inner02.xfdl - Button Tab에 연결될 두번째 Form 파일입니다.

buttontab_inner03.xfdl - Button Tab에 연결될 세번째 Form 파일입니다.

2. 화면 동작 가이드

#1. 화면 온로드시 Button Tab 초기화, Tab추가, Tab 활성화(첫번째 Tab)가 실행됩니다.

#2. 탭버튼 클릭 시 해당 Tab화면이 활성화 됩니다.

#3. 닫기버튼 클릭 시 해당 Tab화면이 삭제 됩니다.

#4. Button Tab의 사이즈 보다 탭이 많을 경우 이전/다음버튼이 활성화 되며 이전/다음으로 이동할 수 있습니다.

#5. 전체 닫기 버튼을 클릭하여 열린 모든 탭을 삭제할 수 있습니다.

 

테스트 버전 정보

Product Version : 17.0.0.2001 (2019.5.30.1)

 

파일 다운로드 경로

https://www.playnexacro.com/techtips/1001/button-tab-button-div를-이용한-탭화면-구성하는-함수

play nexacro