jquery rangeslider 사용법
- 王林원래의
- 2023-05-28 15:49:08399검색
jQuery Rangeslider는 드래그 가능한 슬라이더 컨트롤을 쉽게 만들 수 있는 jQuery 기반 플러그인입니다. 이 글에서는 jQuery Rangeslider를 사용하는 방법을 보여드리겠습니다.
jQuery Rangeslider 설치
jQuery Rangeslider는 다음과 같은 다양한 방법으로 설치할 수 있습니다.
CDN 링크를 통해 소개
CDN 링크를 추가하면 jQuery Rangeslider를 얻을 수 있습니다. 가장 쉬운 설치 방법은 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>NPM을 통해 설치
NPM을 통해 jQuery Rangeslider를 설치할 수도 있습니다. 터미널에서 다음 명령을 실행합니다.
npm install rangeslider.js
그런 다음 HTML 파일에 다음 코드를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>Using jQuery Rangeslider
설치가 완료되면 jQuery Rangeslider를 사용할 수 있습니다. 사용 예는 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider({
polyfill: false,
onSlide: function(position, value) {
console.log('position: ' + position, ' value: ' + value);
}
});
});
</script>
</body>
</html>이 예는 jQuery Rangeslider를 사용하여 드래그 가능한 입력 슬라이더 컨트롤을 웹 페이지에 추가하는 방법을 보여줍니다.
코드에서는 먼저 필요한 CSS 및 JavaScript 파일을 소개합니다.
그런 다음 HTML 입력 상자 요소에 type="range" 속성을 추가하면 웹 페이지에 슬라이더 컨트롤이 생성됩니다.
그런 다음 jQuery 선택기를 사용하여 입력 상자를 선택하고 rangeslider() 메서드를 호출하여 드래그 가능한 슬라이더 컨트롤로 변환합니다.
rangeslider() 메서드를 호출할 때 다음과 같은 몇 가지 매개변수도 전달했습니다.
- polyfill: false. 이 매개변수는 jQuery Rangeslider가 폴리필 기능을 사용하지 않도록 지시합니다. Polyfill은 HTML5 슬라이더 컨트롤을 지원하지 않는 이전 브라우저에서 JavaScript를 사용하여 이 기능을 활성화합니다. 그러나 최신 브라우저에서는 이 폴리필 기능이 거의 사용되지 않습니다. 따라서 이 매개변수를 false로 설정했습니다.
- onSlide: 함수(위치, 값) {...}. 이 매개변수는 슬라이더 컨트롤 위로 슬라이드할 때 어떤 일이 발생하는지 jQuery Rangeslider에 알려줍니다. 이 예에서는 스와이프할 때마다 호출되는 함수를 정의합니다. 이 함수는 슬라이더의 위치와 현재 값이라는 두 가지 매개변수를 허용합니다. 이 함수의 출력을 콘솔에서 볼 수 있도록 이 함수를 콘솔에 출력합니다.
요약
jQuery Rangeslider는 드래그 가능한 입력 슬라이더 컨트롤을 웹 페이지에 쉽게 추가할 수 있는 매우 실용적인 jQuery 플러그인입니다. 이 기사에서는 jQuery Rangeslider를 설치하는 방법과 이를 사용하여 슬라이더 컨트롤을 만들고 일부 매개 변수를 전달하여 사용자 정의하는 방법을 보여주었습니다. 이 기사가 jQuery Rangeslider를 빠르게 시작하는 데 도움이 되기를 바랍니다.
위 내용은 jquery rangeslider 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!