guide:component:panel:panel_contentflip [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 패널 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|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/PANEL/panel_contentflip"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
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);
}
</sxh>