jQuery jRange는 슬라이딩 선택 숫자 범위 특수 효과를 구현합니다_jquery

쇼핑 시 가격대 선택, 호스트 구매 시 CPU 선택, 메모리 크기 구성 등 페이지에서 값 범위를 선택해야 하는 경우가 있습니다. 직관적인 슬라이더 바를 사용하여 직접 선택할 수 있습니다. 수작업 없이 원하는 값을 입력하는 것이 간단하고 편리합니다.

HTML

먼저 jQuery 라이브러리 파일과 jRange 관련 CSS 파일(jquery.range.css 및 플러그인: jquery.range.js)을 로드합니다

코드 복사 코드는 다음과 같습니다.

그런 다음 슬라이더 선택기를 표시해야 하는 위치에 다음 코드를 입력하세요.

코드 복사 코드는 다음과 같습니다.

hiiden 유형의 텍스트 필드를 사용하고 기본값(예: 23)을 설정했습니다.

jQuery

jRange 플러그인 호출은 매우 간단합니다. 다음 코드를 사용하면 됩니다.

코드 복사

코드는 다음과 같습니다. $('.single-slider').jRange({ 보낸 사람: 0,

받는 사람: 100,

단계: 1,
규모: [0,25,50,75,100],
형식: '%s',
너비: 300,
showLabels: true,
showScale: 참
})

그런 다음 웹페이지를 실행하면 DEMO에서 효과를 확인할 수 있습니다.

옵션 설정

플러그인 jRange는 다양한 요구 사항을 충족하는 데 필요한 몇 가지 옵션 설정도 제공합니다.

옵션	설명	기본값
에서	슬라이딩 범위의 최소값(0과 같은 숫자)
에	슬라이딩 범위의 최대값(예: 100)
걸음	각 슬라이드의 단계값, 크기	1
규모	슬라이더 아래의 스케일 레이블, [0,50,100]과 같은 배열 유형	[출발, 도착]
표시라벨	부울 유형, 슬라이더 아래에 사이즈 라벨 표시 여부	그렇습니다
쇼스케일	부울 유형, 슬라이더 위에 숫자 레이블 표시 여부	그렇습니다
형식	숫자 형식	"%s"
Breite	Breite des Schiebereglers	300
isRange	Ob es der Auswahlbereich ist.	falsch

Weitere Informationen finden Sie auf der offiziellen Website des jRange-Projekts: https://github.com/nitinhayaran/jRange

Das Obige ist der gesamte Inhalt dieses Artikels. Freunde, die ihn benötigen, können darauf verweisen.