guide:component:treemenu:treemenu_horz [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 트리메뉴 루트메뉴 수평나열 가이드 ======

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

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

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

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

===== 예시 =====

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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEMENU/treemenu_horz.xml|treemenu_horz.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEMENU/treemenu_horz.js|treemenu_horz.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/TREEMENU/treemenu_horz|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/TREEMENU/treemenu_horz"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
// 예시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);
	}
	*/
}
</sxh>