트리메뉴 루트메뉴 수평나열 가이드

이 화면은 트리메뉴의 루트메뉴를 수평나열하는 샘플 화면이다.

트리메뉴의 root_item_dir 속성을 0:horizontal로 설정하여 루트메뉴를 수평으로 나열하여 표시할 수 있다.

수평으로 나열하는 경우, 루트메뉴의 너비는 item_width속성을 통해서 설정가능하다.

(하위메뉴는 루트메뉴의 너비를 기준으로 childbox_padding, childpanel_padding 속성에 따라서 계산되어 표시된다)

템플릿 위치: /HTML5/COMPONENT/TREEMENU/treemenu_horz

템플릿 파일

• treemenu_horz.xml
• treemenu_horz.js
• 새창으로 실행

// 예시2 - 전체높이 자동조절 + 호버시 하위메뉴 전체펼치기
function treemenu02_on_mousein(objInst, index, depth)
{
	// 루트메뉴영역에 마우스인시 하위메뉴 전체 펼치기
	if (depth == 0) {
		treemenu02.expandall(2);
	}
}

function treemenu02_on_mouseout(objInst, index, depth)
{
	// 트리메뉴에서 마우스아웃시 하위메뉴 전체 접기
	if (depth == -1) {
		treemenu02.expandall(1);
	}
}

//////////////////////////////////////////////////////////
// 예시2 추가 - 루트메뉴 클릭시 하위메뉴 전체펼치기
// expand_type속성을 2:not expand root 로 설정
// expanddepth API로 토글처리할 하위메뉴 깊이를 지정할 수 있다.
function treemenu02_on_itemclick(objInst, index, depth, type)
{
	/*
	if (depth == 0) {
		// 루트메뉴를 클릭한경우, 하위메뉴 펼치기

		// 1 depth까지의 하위메뉴를 토글
		treemenu02.expanddepth(0, 3);

		// 최하위메뉴까지 펼치려면 expandall을 호출
		//treemenu02.expandall(3);
	}
	*/
}