AJAX를 이용한 슬라이드 날짜 선택폼

본문

이번엔 튜토리얼이 아닌 AJAX를 이용한 슬라이드 날짜 선택폼을 소개하고자 합니다.응용하기에 따라서 상당히 유용한 소스라고 생각되어 간단하게나마 소개드리고 약간의 설명을 부가하고자 합니다.
사용법은 간단합니다.
우선 스타일 시트를 정의해줍니다.

<style type = "text/css">
label {
 width:45px;font-size:12px;
}
input {
 border:1px solid #000;
 font-size:.7em;
}
</style>

그 다음에 해당 자바스크립트를 문서에 정의해 줍니다.

<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder,dragdrop" ></script>
<script type="text/javascript" src="js/date-en-US.js" ></script>
<script type="text/javascript" src="js/dateslider.js" ></script>
<script language = "javascript"> 
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);  
p_oDateSlider.attachFields($('datestart'), $('dateend'));
</script>

부가설명

마지막 자바스크립트에 해당하는
<script language = "javascript"> 
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);  
p_oDateSlider.attachFields($('datestart'), $('dateend'));
</script>
부분의 설명입니다.
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);  에서
* 'sliderbar'는 슬라이드바를 포함하는 div에 해당하는 id입니다.
* '2007-10-01', '2008-10-01'는 처음 로딩시 기본 선택되는 날짜의 시작과 끝입니다.
* 2001, 2009 는 전체 날짜 선택의 시작과 끝입니다.(슬라이드바를 드래그 하시면 시작과 끝을 알수 있습니다)

p_oDateSlider.attachFields($('datestart'), $('dateend')); 에서
* datestart는 날짜의 시작에 해당하는 input의 변수명입니다.
* dateend는 날짜의 끝에 해당하는 input의 변수명입니다.

적용한 샘플을 첨부하오니 참조하시기 바랍니다.

관련자료

• 첨부
  dateslider.7z 파일크기 (49.9K) 3 회 다운로드

  등록일 2010.08.03 14:39
• 이전
  파이어웍스로 아쿠아버튼 만들기

  작성일 2008.04.26 12:18
• 다음
  홈페이지 상단(#top) 이쁘게 꾸미기(2탄)

  작성일 2008.04.23 12:13