====== 팝메뉴 기본 가이드 ======
이 화면은 팝메뉴 컴포넌트 샘플화면이다.
팝메뉴 컴포넌트는 컨텍스트 메뉴를 표현하기 위해 사용하는 컴포넌트이다.
아이템은 API나 데이터셋을 연결하여 추가할 수 있다.
아이템의 type은 메뉴(menu) 혹은 구분선(separator)을 설정한다(default는 menu)
아이템의 depth는 필수 속성이다.
submenu_position이 0:expand일때 서브메뉴는 기본적으로 우측에 표시되며, 우측에 표시될 공간이 부족할 경우 부모 메뉴의 좌측에 표시된다.
팝메뉴는 control_name 속성이나 showpopmenu API를 이용하여 표시할 수 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/PANEL/popmenu_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/POPMENU/popmenu_basic.xml|popmenu_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/POPMENU/popmenu_basic.js|popmenu_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/POPMENU/popmenu_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
function screen_on_load()
{
var prop_obj = {};
prop_obj.depth = 0; // 아이템의 레벨
prop_obj.id = "0"; // 메뉴를 구분하는 ID
prop_obj.text = "item_0"; // 표시할 텍스트
prop_obj.type = "menu"; // 메뉴 유형 ('menu'/'separator')
prop_obj.submenu_width = 150; // 서브메뉴의 넓이(0: 자동)
this.popmenu2.additem(prop_obj); // 아이템 추가
prop_obj.depth = 0;
prop_obj.id = "1";
prop_obj.text = "item_1";
prop_obj.type = "menu";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 0;
prop_obj.type = "separator";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 0;
prop_obj.id = "2";
prop_obj.text = "item_2";
prop_obj.type = "menu";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 1;
prop_obj.id = "3";
prop_obj.text = "item_3";
prop_obj.type = "menu";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 1;
prop_obj.id = "4";
prop_obj.text = "item_4";
prop_obj.type = "menu";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 0;
prop_obj.type = "separator";
this.popmenu2.additem(prop_obj);
prop_obj.depth = 0;
prop_obj.id = "5";
prop_obj.text = "item_5";
prop_obj.type = "menu";
this.popmenu2.additem(prop_obj);
}
function txt2_on_rclick(objInst)
{
var pos = factory.getmouseeventpos();
this.popmenu2.showpopmenu(true, pos.pageX , pos.pageY);
}
function popmenu1_on_click(objInst, index, depth, text, id, type, icon_normal, submenu_width)
{
var msg = "";
msg += "선택한 아이템 정보\n";
msg += "INDEX: " + index + "\n";
msg += "DEPTH: " + depth + "\n";
msg += "TEXT: " + text + "\n";
msg += "ID: " + id + "\n";
msg += "TYPE: " + type + "\n";
msg += "ICON_NORMAL: " + icon_normal + "\n";
msg += "SUBMENU_WIDTH: " + submenu_width;
screen.alert(msg);
}
function btn_deleteallitems_on_mouseup(objInst)
{
this.popmenu2.deleteallitems();
}