====== 트리메뉴 루트메뉴 수평나열 가이드 ======
이 화면은 트리메뉴의 루트메뉴를 수평나열하는 샘플 화면이다.
트리메뉴의 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|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 예시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);
}
*/
}