패널 filp 기능 가이드

패널 컴포넌트의 flip 관련 기능에 대한 샘플 화면이다.

패널 컴포넌트 flip 기능은 패널 내부에 패널 내부 전체 영역을 차지하는 2개의 컴포넌트를 회전하여 표시하는 기능을 수행한다.

일반적으로 패널 내부에 전면용/후면용 패널(border 속성 0:none)을 구성하여 처리한다. (후면용 패널 hidden 속성 true)

플립 동작은 setflip API의 nFlipAction 파라미터로 동작 방식이 지정된다.

관련 API는 getcontentflip, setcontentflip가 있다.

템플릿 위치: /HTML5/COMPONENT/PANEL/panel_contentflip

템플릿 파일

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

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);
}