티스토리 뷰
반응형
웹과 모바일에서 입력창이 숫자일 때, 슬라이더 형태로 제공하는 방법을 정리해 보려고 한다.
부트스트랩을 이용한 오픈소스가 있어서 활용해봤다.
먼저 실행하는 결과를 살펴보려면 http://www.word.pe.kr/bootstrap/slider.html 에 접속하면 된다.
다음과 같은 화면이 나온다.
부트스트랩 슬라이더 소스 설명
소스에서는 bootstrap CSS와 JQuery를 기본으로 사용하고 있고, 별도의 bootstrap-slider css와 js 파일이 존재한다.
각각의 파일은 다음과 같다.
boostratp_slider_css_js.zip먼저 슬라이더로 입력할 부분과 결과를 출력할 부분의 HTML을 다음과 같이 구성한다.
최소값(data-slider-min), 최대값(data-slider-max)을 지정할 수 있고,
값의 이동 간격(data-slider-step)을 선택할 수 있다. 이동 간격은 정수가 아닌 0.5와 같은 실수도 가능하다.
그리고 기본값(data-slider-value)을 지정하면 된다.
그리고 jQuery를 이용한 자바스크립트에서 다음과 같이 슬라이더를 보여주고, 값이 바뀔 때마다 결과를 출력하도록 한다.
전체 HTML 소스를 살펴보면 다음과 같다.
오픈 소스 및 예제들
사용한 오픈 소스는 bootstrap-slider라는 이름으로 https://github.com/seiyria/bootstrap-slider 에서 제공하고 있다.
더 많은 예제를 살펴보려면 http://seiyria.github.io/bootstrap-slider/ 를 참고하면 된다.
반응형
'프로그래밍 > Web' 카테고리의 다른 글
| Sitemesh 활용시 하단의 자바스크립트 처리하기 (0) | 2015.06.19 |
|---|---|
| 반응형 웹을 위한 부트스트랩 활용하기 (0) | 2015.06.12 |
| HighChart를 활용한 웹/모바일 호환 그래프 만들기~ (0) | 2015.06.05 |
| 모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트 (0) | 2015.06.03 |
| PHP를 활용하여 DB 내용을 JSON으로 출력하기 (0) | 2015.05.18 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- 웹
- 프로젝트
- 통계
- 도서
- 분석
- 구글
- 디자인
- 애플
- 빅데이터
- java
- 책
- 자바스크립트
- HTML
- 세미나
- 자바
- 아이폰
- r
- XML
- 마케팅
- 안드로이드
- Hadoop
- fingra.ph
- mysql
- SCORM
- 맥
- 클라우드
- 하둡
- ms
- 모바일
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
글 보관함