매일 포스트를 하기로 시작한지 이틀만에,,이런 위기에 봉착하다니...하하하..
오늘은 3시간 정도 자바스크립트로 게이지 바를 만들었다.. -_-;;
Scriptaculous의 slide.js 와 effects.js 를 사용하여 동적인 효과를 주었다.
소스를 공개하고 싶지만,
처음 시작을 회사의 사이트를 가지고 만들었기때문에, 좀 까리하다..-_-
하지만, Scriptaculous API 문서 가 아주 잘 정리되어 있기 때문에 그것을 참고해보자.
아래의 이미지는 Scriptaculous의 예제 파일 중에서 가져온 것이다.
물론, 저 빨간 점을 마우스 드래그로 이동시킬수 있으며, 빨간 점의 값을 드래그에 맞추어서 보여줄 수 있다.
예제 소스를 보면, 매우 심플함을 알 수 있다..만쉐이~
오늘은 3시간 정도 자바스크립트로 게이지 바를 만들었다.. -_-;;
Scriptaculous의 slide.js 와 effects.js 를 사용하여 동적인 효과를 주었다.
소스를 공개하고 싶지만,
처음 시작을 회사의 사이트를 가지고 만들었기때문에, 좀 까리하다..-_-
하지만, Scriptaculous API 문서 가 아주 잘 정리되어 있기 때문에 그것을 참고해보자.
아래의 이미지는 Scriptaculous의 예제 파일 중에서 가져온 것이다.
물론, 저 빨간 점을 마우스 드래그로 이동시킬수 있으며, 빨간 점의 값을 드래그에 맞추어서 보여줄 수 있다.
 |
예제 소스를 보면, 매우 심플함을 알 수 있다..만쉐이~
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous .js?load=slide"></script>
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug1"> </p>
<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
// slide bar 의 handle 위치의 초기 셋팅 값을 지정한다. (0 ~ 1 사이의 값)
sliderValue:0.5,
// 슬라인드 중일때의 콜백 함수
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
// 슬라이드 종료후의 콜백 함수
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
// ]]>
</script>
