====== 아코디언 기본 가이드 ======
이 화면은 아코디언 샘플화면이다.
아코디언에 추가되는 아이템들은 부모 컴포넌트가 모두 동일해야 정상적으로 추가된다.
아이템 사이의 간격은 개발툴에서 설정한 간격으로 유지된다.
아이템을 펼쳐진 상태로 생성 후 초기에 졉혀지게 설정시 아이템들의 접히는 모습이 보이게 된다.
└ 이때에는 아이템의 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
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ACCORDION/accordion_basic.xml|accordion_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ACCORDION/accordion_basic.js|accordion_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/ACCORDION/accordion_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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);
}