팝메뉴 기본 가이드

이 화면은 팝메뉴 컴포넌트 샘플화면이다.

팝메뉴 컴포넌트는 컨텍스트 메뉴를 표현하기 위해 사용하는 컴포넌트이다.

아이템은 API나 데이터셋을 연결하여 추가할 수 있다.

아이템의 type은 메뉴(menu) 혹은 구분선(separator)을 설정한다(default는 menu)

아이템의 depth는 필수 속성이다.

submenu_position이 0:expand일때 서브메뉴는 기본적으로 우측에 표시되며, 우측에 표시될 공간이 부족할 경우 부모 메뉴의 좌측에 표시된다.

팝메뉴는 control_name 속성이나 showpopmenu API를 이용하여 표시할 수 있다.

템플릿 위치: /HTML5/COMPONENT/PANEL/popmenu_basic

템플릿 파일

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

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();
}