====== 슬라이드 메뉴 가이드 ======
이 화면은 슬라이드 메뉴를 구성하는 샘플 화면이다.
메뉴버튼를 이용한 샘플과 패널에 animate 속성을 적용하여 메뉴를 구현한 샘플이다.
===== 예시 =====
템플릿 위치: /HTML5/UTIL/ANIMATE/slide_menu
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/UTIL/ANIMATE/slide_menu.xml|slide_menu.xml]]
* [[xf5projecthome>template/screen/HTML5/UTIL/ANIMATE/slide_menu.js|slide_menu.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/UTIL/ANIMATE/slide_menu|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/*
* 메뉴버튼 사용
*/
// 메뉴 버튼 펼치기 / 접기
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", "");
}
}