====== 네비바 기본 가이드 ======
이 화면은 네비바 컴포넌트에 대한 샘플 화면이다.
네비바 컴포넌트는 사이트 이동 경로를 표시하기 위한 가로 나열 네비게이션바이다.
아이템의 추가/아이템의 추가/삭제는 스크립트를 통해서 이루어진다.
하나의 아이템은 왼쪽아이콘+텍스트+오른쪽아이콘+구분자로 이루어진다.(마지막 아이템은 구분자가 표시되지 않는다)
아이템을 클릭/더블클릭/오른쪽마우스클릭시 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
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/NAVIBAR/navibar_basic.xml|navibar_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/NAVIBAR/navibar_basic.js|navibar_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/NAVIBAR/navibar_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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);
}