guide:component:progressbar:progressbar_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== 프로그래바 기본 가이드 ======

이 화면은 프로그래스바 컴포넌트에 대한 샘플 화면이다.

관련 속성으로 progress_type, circle_type, circle_width가 있다.

관련 이벤트로 on_change가 있다.
===== 예시 =====

템플릿 위치: /HTML5/COMPONENT/PROGRESSBAR/progressbar_basic

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/PROGRESSBAR/progressbar_basic.xml|progressbar_basic.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/PROGRESSBAR/progressbar_basic.js|progressbar_basic.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/PROGRESSBAR/progressbar_basic|새창으로 실행]]

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

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

<sxh javascript>
////////////////////////////////////////////////
// Event

// 마우스 오버 값 변경시 이벤트 처리
function ratingbar01_on_change(objInst, fvalue)
{
	fld01.settext(fvalue);
}

// 값 변경시 이벤트 처리
function ratingbar01_on_changed(objInst, fvalue)
{
	fld02.settext(fvalue);
}

// 마우스 클릭시 이벤트 처리
function ratingbar01_on_click(objInst, fvalue)
{
	fld03.settext(fvalue);
}

function ratingbar02_on_click(objInst, fvalue)
{
	screen.alert("클릭한 위치값 : " + fvalue + "\n레이팅바 실제값 : " + ratingbar02.getvalue());
}
</sxh>