네비바 기본 가이드

이 화면은 네비바 컴포넌트에 대한 샘플 화면이다.

네비바 컴포넌트는 사이트 이동 경로를 표시하기 위한 가로 나열 네비게이션바이다.

아이템의 추가/아이템의 추가/삭제는 스크립트를 통해서 이루어진다.

하나의 아이템은 왼쪽아이콘+텍스트+오른쪽아이콘+구분자로 이루어진다.(마지막 아이템은 구분자가 표시되지 않는다)

아이템을 클릭/더블클릭/오른쪽마우스클릭시 on_itemclick/on_itemdblclick/on_itemrclick이벤트가 발생하며, 선택된 아이템의 인덱스와 아이템영역정보(왼쪽아이콘or텍스트or오른쪽아이콘or구분자)가 넘어온다.

관련 속성으로 item_lefticon, item_lefticonshow, item_righticon, item_righticonshow, item_sepimage, item_borderradius, item_gap, item_textmargin가 있다.

관련 API로 additem, getitembackcolor, setitembackcolor, getitembackimage, setitembackimage, getitemlefticon, setitemlefticon

getitemlefticonshow, setitemlefticonshow, getitemrighticon, setitemrighticon, getitemrighticonshow, setitemrighticonshow가 있다.

템플릿 위치: /HTML5/COMPONENT/NAVIBAR/navibar_basic

템플릿 파일

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

function screen_on_load()
{
	// 예시1
	// 네비바에 아이템 추가
	for(var i=0; i<3; i++) {
		var idx = this.navibar01.additem("Item"+this.navibar01.getitemcount());
	}

	// 예시2
	// 네비바에 아이템 추가
	for(var i=0; i<3; i++) {
		var idx = this.navibar02.additem("Item"+this.navibar02.getitemcount());
	}

	this.SetExample03();	// 예시3
	this.SetExample04();	// 예시4
	this.SetExample05();	// 예시5
}

////////////////////////////////////////////////
// 예시3
function SetExample03()
{
	this.navibar03.deleteallitem();

	// 아이템 추가
	this.navibar03.additem("HOME");
	this.navibar03.additem("PORTFOLIO");
	this.navibar03.additem("PROJECTS");
	this.navibar03.additem("DAILY UI");
	this.navibar03.additem("BREADCRUMB");

	// 아이템별 배경색 설정
	this.navibar03.setitembackcolor(0, factory.rgb(249,19,183));
	this.navibar03.setitembackcolor(1, factory.rgb(66,142,254));
	this.navibar03.setitembackcolor(2, factory.rgb(3,207,13));
	this.navibar03.setitembackcolor(3, factory.rgb(246,39,34));
	this.navibar03.setitembackcolor(4, factory.rgb(238,245,255));
}

// 예시4
function SetExample04()
{
	this.navibar04.deleteallitem();

	// 아이템 추가
	this.navibar04.additem("");
	this.navibar04.additem("");
	this.navibar04.additem("");
	this.navibar04.additem("");
	this.navibar04.additem("");

	// 아이템별 이미지 설정
	this.navibar04.setitembackimage(0, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/navi_item01.png");
	this.navibar04.setitembackimage(1, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/navi_item02.png");
	this.navibar04.setitembackimage(2, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/navi_item03.png");
	this.navibar04.setitembackimage(3, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/navi_item04.png");
	this.navibar04.setitembackimage(4, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/navi_item05.png");
}

// 예시5
function SetExample05()
{
	this.navibar05.deleteallitem();

	// 아이템 추가
	this.navibar05.additem("Catalog");
	this.navibar05.additem("Computers");
	this.navibar05.additem("Software");
	this.navibar05.additem("Sketch");

	// 첫번째 아이템만 왼쪽아이콘 표시
	this.navibar05.setitemlefticon(0, "/TEMPLATE/HTML5/COMPONENT/NAVIBAR/btn_navi_home.png");
	this.navibar05.setitemlefticonshow(0, true);
}


////////////////////////////////////////////////
// Event
// 마우스 클릭시 이벤트 처리
function navibar02_on_itemclick(objInst, index, type)
{
	this.ShowAlert("_on_itemclick", objInst, index, type);
}

// 마우스 더블클릭시 이벤트 처리
function navibar02_on_itemdblclick(objInst, index, type)
{
	this.ShowAlert("_on_itemdblclick", objInst, index, type);
}

// 오른쪽마우스 클릭시 이벤트 처리
function navibar02_on_itemrclick(objInst, index, type)
{
	this.ShowAlert("_on_itemrclick", objInst, index, type);
}

function ShowAlert(event, objInst, index, type)
{
	var msg = "";
	if (type == 1) {
		msg = "Left Icon Click";
	} else if (type == 2) {
		msg = "Right Icon Click";
	} else if (type == 3) {
		msg = "Separator Click";
	} else {
		msg = "Text Click";
	}

	var msg1 = objInst.getname() + event + " : " + objInst.getitemtext(index) + " , " + msg;

	screen.alert(msg1);
}