====== 패널 filp 기능 가이드 ======
패널 컴포넌트의 flip 관련 기능에 대한 샘플 화면이다.
패널 컴포넌트 flip 기능은 패널 내부에 패널 내부 전체 영역을 차지하는 2개의 컴포넌트를 회전하여 표시하는 기능을 수행한다.
일반적으로 패널 내부에 전면용/후면용 패널(border 속성 0:none)을 구성하여 처리한다. (후면용 패널 hidden 속성 true)
플립 동작은 setflip API의 nFlipAction 파라미터로 동작 방식이 지정된다.
관련 API는 getcontentflip, setcontentflip가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/PANEL/panel_contentflip
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/PANEL/panel_contentflip.xml|panel_contentflip.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/PANEL/panel_contentflip.js|panel_contentflip.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/PANEL/panel_contentflip|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
function btn_setcontentflip_y_on_click(objInst)
{
// mouse hover 이벤트 방식으로 Y축 플립 적용
pnl_flip_y.setcontentflip(pnl_flipy_front, pnl_flipy_back, "Y", 600, 0, 1000);
pnl_flipy_back.setvisible(true);
}
function btn_setcontentflip_x_on_click(objInst)
{
// mouse hover 이벤트 방식으로 X측 플립 적용
pnl_flip_x.setcontentflip(pnl_flipx_front, pnl_flipx_back, "X", 600, 0, 1000);
pnl_flipx_back.setvisible(true);
}
function btn_setcontentflip_y_api_on_click(objInst)
{
// mouse hover 이벤트 방식으로 Y축 플립 적용
pnl_flip_y_api.setcontentflip(pnl_flipyapi_front, pnl_flipyapi_back, "Y", 600, 1, 1000);
pnl_flipyapi_back.setvisible(true);
}
function btn_goto_front_on_mouseup(objInst)
{
pnl_flip_y_api.togglecontentflip();
}
function btn_goto_back_on_mouseup(objInst)
{
pnl_flip_y_api.togglecontentflip();
}
function btn_setcontentflippanelwidth_y_on_mouseup(objInst)
{
// mouse hover 이벤트 방식으로 Y축 플립 적용
pnl_flip_y_panelwidth.setcontentflip(pnl_flipypanelwidth_front, pnl_flipypanelwidth_back, "Y", 600, 0, 1000);
pnl_flipypanelwidth_back.setvisible(true);
}