jQuery를 UI의 API - 슬라이더 구성 요소 (슬라이더 위젯)
범주
용법
설명 : 값을 선택 핸들을 드래그합니다.
새로운 버전 : 1.5
jQuery를 UI 슬라이더 (슬라이더) 플러그인은 슬라이더를 통해 선택 허용한다. 다중 핸들 및 범위 등의 다양한 옵션이 있습니다. 핸들은 마우스 나 화살표 키를 사용하여 이동 될 수있다.
슬라이더 구성 요소 (슬라이더 위젯)을 초기화하는 동안 클래스로 생성됩니다 ui-slider-handle 손잡이 요소입니다. 요소를 추가하는 동안 당신은 생성 및 초기화하기 전에 요소를 추가 할 수 있습니다 ui-slider-handle , 클래스는 사용자 정의 핸들 요소를 지정합니다. 그것은 단지 일치하는 만듭니다 value / values 핸들 번호의 길이를 원하는합니다. 예를 들어, 당신은 지정하면 values: [ 1, 5, 18 ] , 및 사용자 정의 핸들을 작성, 플러그인 다른 두를 작성합니다.
테마
사용 슬라이더 구성 요소 (슬라이더 위젯) jQuery를 UI의 CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 스타일을 지정 슬라이더를 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :
-
ui-slider슬라이더 컨트롤 트랙 :. 이 요소는 슬라이더를 기반으로합니다orientation추가로와ui-slider-horizontal또는ui-slider-vertical, 클래스입니다.-
ui-slider-handle: 슬라이더 핸들입니다. -
ui-slider-range: 설정하면range옵션을 선택한 범위를 사용하는 경우. 경우range옵션이 설정되어"min"또는"max"추가 요소로, 각각 있습니다ui-slider-range-min또는ui-slider-range-max, 클래스입니다.
-
의존
추가 정보
- 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
예
간단한 jQuery를 UI 슬라이더 (슬라이더).
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> 슬라이더 부재 (슬라이더 위젯) 데모 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스타일> #slider {마진 : 10px;} </ 스타일>
<스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
<사업부 아이디 = "슬라이더"> </ DIV>
<스크립트>
$ ( "#slider") .slider ();
</ 스크립트>
</ BODY>
</ HTML>