슬라이드 메뉴 가이드
이 화면은 슬라이드 메뉴를 구성하는 샘플 화면이다.
메뉴버튼를 이용한 샘플과 패널에 animate 속성을 적용하여 메뉴를 구현한 샘플이다.
예시
화면 스크립트
/* * 메뉴버튼 사용 */ // 메뉴 버튼 펼치기 / 접기 function mbtn_on_mouseup(objInst) { this.mbtn.togglemenubox(); } /* * 패널사용 */ // 열려있는 패널영역을 숨김처리한다. function screen_on_load() { // 화면로드시 숨김상태로 시작할경우. //var obj_prop = {left : 6, width: 84}; //pl_menu.animate(obj_prop, 0, "swing", "showMenuCallback"); //pl_menu2.animate(obj_prop, 0, "swing", "showMenuCallback"); // 화면로드시 펼침상태로 시작할경우. this.showMenuCallback(); } // animate callback function showMenuCallback() { // 패널영역을 보여준다. this.pl_menu.setvisible(true); this.pl_menu2.setvisible(true); // 패널영역을 최상단으로 배치한다. this.pl_menu.setzorder(0); this.pl_menu2.setzorder(0); } // pl_menu : 메뉴 영역이 열려 있는지 확인 후 토글 처리한다. function btn_hidden_on_mouseup(objInst) { var isShow; var nBtnWidth = this.btn_hidden.getwidth(); if (this.btn_hidden.getleft() < nBtnWidth) { isShow = false; } else { isShow = true; } this.menuToggle(isShow); } // pl_menu2 : 메뉴 영역이 열려 있는지 확인 후 토글 처리한다. function btn_hidden2_on_mouseup(objInst) { var isShow; var nBtnWidth = this.btn_hidden2.getwidth(); var plWidth = this.pl_menu2.getwidth(); if (plWidth > nBtnWidth) { isShow = true; } else { isShow = false; } this.menuToggle2(isShow); } // pl_menu : 메뉴 펼치기 / 닫기 function menuToggle(isShow) { var obj_prop, obj_prop_inner; var scWidth; if (isShow) { obj_prop = {left : 6, width: 84}; obj_prop_inner = {left : 0, width: 0}; this.pl_menu.animate(obj_prop, 500, "swing", ""); } else { scWidth = screen.getoriginalscreenwidth(); obj_prop = {left : 6, width: 798 }; this.pl_menu.animate(obj_prop, 500, "swing", ""); } } // pl_menu2 : 메뉴 펼치기 / 닫기 function menuToggle2(isShow) { var obj_prop, obj_prop_inner; var scWidth; if (isShow) { obj_prop = {left : 6, width: 84}; obj_prop_inner = {left : 0, width: 0}; this.pl_menu2.animate(obj_prop, 500, "swing", ""); } else { scWidth = screen.getoriginalscreenwidth(); obj_prop = {left : 6, width: 798 }; this.pl_menu2.animate(obj_prop, 500, "swing", ""); } }