아코디언 기본 가이드

이 화면은 아코디언 샘플화면이다.

아코디언에 추가되는 아이템들은 부모 컴포넌트가 모두 동일해야 정상적으로 추가된다.

아이템 사이의 간격은 개발툴에서 설정한 간격으로 유지된다.

아이템을 펼쳐진 상태로 생성 후 초기에 졉혀지게 설정시 아이템들의 접히는 모습이 보이게 된다.

└ 이때에는 아이템의 hidden 속성을 true로 설정 후 refresh API를 호출하면 접히는 모습을 보이지 않게 할 수 있다.

additem, setitemsize API의 옵션파라미터 bAutoSize값을 설정하면, 아이템이 접힐때 변경된 크기만큼 특정아이템의 크기가 자동조절된다.

관련 속성으로 item_dir, effect_duration, effect_easing가 있다.

관련 이벤트로 on_expand가 있다.

관련 API로 additem, setitemsize, refresh, expanditem가 있다.

예시

템플릿 위치: /HTML5/COMPONENT/ACCORDION/accordion_basic

템플릿 파일

화면 스크립트

function screen_on_load()
{
	// 아이템 삽입(세로방향)
	// 1번째 파라미터 : 추가할 컴포넌트 이름
	// 2번째 파라미터 : 초기에 펼쳐서 보일지 여부
	// 3번째 파라미터 : 최소 크기 (접힌 상태일때 크기)
	// 4번째 파라미터 : 최대 크기 (펼쳐진 상태일때 크기)
	this.accordion_vert.additem("pn_vert_1", true, 26, 100);
	this.accordion_vert.additem("pn_vert_2", true, 26, 100);
	this.accordion_vert.additem("pn_vert_3", true, 26, 100);
	this.accordion_vert.additem("pn_vert_4", true, 26, 100);
	this.accordion_vert.refresh(); // 아이템의 크기 및 위치를 새로 고침

	// 아이템 삽입(가로방향)
	this.accordion_horz.additem("pn_horz_1", true, 26, 190);
	this.accordion_horz.additem("pn_horz_2", true, 26, 190);
	this.accordion_horz.additem("pn_horz_3", true, 26, 190);
	this.accordion_horz.additem("pn_horz_4", true, 26, 190);
	this.accordion_horz.refresh();

	// 아이템 삽입(초기에 접어서 표시할 경우)
	this.accordion_vert_fold.additem("pn_vert_fold_1", false, 26, 100);
	this.accordion_vert_fold.additem("pn_vert_fold_2", false, 26, 100);
	this.accordion_vert_fold.additem("pn_vert_fold_3", false, 26, 100);
	this.accordion_vert_fold.additem("pn_vert_fold_4", false, 26, 100);
	this.accordion_vert_fold.refresh();

	// 세로방향 + 1번째 아이템높이 자동
	this.accordion_vert_autosize.additem("pn_vert_autosize_1", true, 26, 60, true);
	this.accordion_vert_autosize.additem("pn_vert_autosize_2", true, 26, 140);
	this.accordion_vert_autosize.additem("pn_vert_autosize_3", true, 26, 96);
	this.accordion_vert_autosize.additem("pn_vert_autosize_4", true, 26, 100);
	this.accordion_vert_autosize.refresh();

	// 가로방향 + 4번째 아이템너비 자동
	this.accordion_horz_autosize.additem("pn_horz_autosize_1", true, 26, 190);
	this.accordion_horz_autosize.additem("pn_horz_autosize_2", true, 26, 190);
	this.accordion_horz_autosize.additem("pn_horz_autosize_3", true, 26, 190);
	this.accordion_horz_autosize.additem("pn_horz_autosize_4", true, 26, 190, true);
	this.accordion_horz_autosize.refresh();
}

function btn_horz_1_on_mouseup(objInst)
{
	// 아이템 토글(아이템 이름으로 설정하는 경우)
	// 1번째 파라미터 : 아이템 번호
	// 2번째 파라미터 : 동작시킬 아이템 이름 (nItemIndex가 -1일때 사용됨)
	// 3번째 파라미터 : 동작시킬 유형타입 (0:접기,1:펼치기,2:토글)
	this.accordion_horz.expanditem(-1, "pn_horz_1", 2);
}

function btn_horz_2_on_mouseup(objInst)
{
	this.accordion_horz.expanditem(-1, "pn_horz_2", 2);
}

function btn_horz_3_on_mouseup(objInst)
{
	this.accordion_horz.expanditem(-1, "pn_horz_3", 2);
}

function btn_horz_4_on_mouseup(objInst)
{
	this.accordion_horz.expanditem(-1, "pn_horz_4", 2);
}

function btn_vert_1_on_mouseup(objInst)
{
	// 아이템 토글(아이템 번호로 설정하는 경우)
	// 1번째 파라미터 : 아이템 번호
	// 2번째 파라미터 : 동작시킬 아이템 이름 (nItemIndex가 -1일때 사용됨)
	// 3번째 파라미터 : 동작시킬 유형타입 (0:접기,1:펼치기,2:토글)
	this.accordion_vert.expanditem(0, null, 2);
}

function btn_vert_2_on_mouseup(objInst)
{
	this.accordion_vert.expanditem(1, null, 2);
}

function btn_vert_3_on_mouseup(objInst)
{
	this.accordion_vert.expanditem(2, null, 2);
}

function btn_vert_4_on_mouseup(objInst)
{
	this.accordion_vert.expanditem(3, null, 2);
}

function btn_vert_fold_1_on_mouseup(objInst)
{
	this.accordion_vert_fold.expanditem(0, null, 2);
}

function btn_vert_fold_2_on_mouseup(objInst)
{
	this.accordion_vert_fold.expanditem(1, null, 2);
}

function btn_vert_fold_3_on_mouseup(objInst)
{
	this.accordion_vert_fold.expanditem(2, null, 2);
}

function btn_vert_fold_4_on_mouseup(objInst)
{
	this.accordion_vert_fold.expanditem(3, null, 2);
}

function btn_vert_autosize_1_on_mouseup(objInst)
{
	this.accordion_vert_autosize.expanditem(0, null, 2);
}

function btn_vert_autosize_2_on_mouseup(objInst)
{
	this.accordion_vert_autosize.expanditem(1, null, 2);
}

function btn_vert_autosize_3_on_mouseup(objInst)
{
	this.accordion_vert_autosize.expanditem(2, null, 2);
}

function btn_vert_autosize_4_on_mouseup(objInst)
{
	this.accordion_vert_autosize.expanditem(3, null, 2);
}

function btn_horz_autosize_1_on_mouseup(objInst)
{
	this.accordion_horz_autosize.expanditem(0, null, 2);
}

function btn_horz_autosize_2_on_mouseup(objInst)
{
	this.accordion_horz_autosize.expanditem(1, null, 2);
}

function btn_horz_autosize_3_on_mouseup(objInst)
{
	this.accordion_horz_autosize.expanditem(2, null, 2);
}

function btn_horz_autosize_4_on_mouseup(objInst)
{
	this.accordion_horz_autosize.expanditem(3, null, 2);
}

목차

아코디언 기본 가이드

예시

화면 스크립트