웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 슬라이더를 이용하여 시간을 설정하는 jQuery 플로그인 - durationSlider 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 슬라이더를 이용하여 시간을 설정하는 jQuery 플로그인 - durationSlider

해피CGI윤실장 2019. 2. 28. 09:16

슬라이더를 이용하여 시간을 설정하는 jQuery 플로그인입니다.

 

- 라이센스

MIT


- 사용 방법


1. 사용할 페이지 상단에 jQuery 라이브러리와 CSS 링크를 걸어줍니다.

 

 

2. 사용할 페이지 상단에 durationSlider 플러그인 파일을 링크해줍니다.

 

 

3. 설정 시간을 표시할 INPUT 태그를 추가합니다.

 

 

4. 슬라이더를 표시할 DIV 레이어를 추가합니다.

 

 

5. durationslider 플러그인을 호출하여 슬라이더를 생성합니다.

 

 

6. 시간의 출력 포멧도 설정할 수 있습니다.

 

 

7. 슬라이더의 범위(최소/최대값)와 값의 변동 단위를 변경할 수 있습니다.

 

 

8. 슬라이더를 마우스 휠로 이동할지 여부도 설정할 수 있습니다.

 

 

- 결과물

 

 

홈페이지바로가기 소스다운로드

Comments