jquery에서 슬라이더는 "슬라이더, 플로팅 블록, 스크롤 막대 슬라이더"를 의미하며 jquery UI의 작은 플러그인입니다. 슬라이더 플러그인을 사용하면 슬라이더를 통해 선택할 수 있습니다. 다중 핸들, 범위 등 다양한 옵션이 있습니다. 핸들은 마우스나 화살표 키를 사용하여 이동할 수 있습니다.
이 기사의 운영 환경: windows10 시스템, jquery 버전 1.10.4, thinkpad t480 컴퓨터.
slider(슬라이더)는 jquery UI에 있는 작은 플러그인입니다.
jQuery UI 슬라이더 플러그인을 사용하면 슬라이더를 통해 선택할 수 있습니다. 다중 핸들, 범위 등 다양한 옵션이 있습니다. 핸들은 마우스나 화살표 키를 사용하여 이동할 수 있습니다.
Theming
Slider 위젯은 jQuery UI CSS 프레임워크를 사용하여 모양과 느낌을 정의합니다. 슬라이더 관련 스타일을 사용해야 하는 경우 다음 CSS 클래스 이름을 사용할 수 있습니다.
ui-slider: 슬라이더 컨트롤의 트랙. 이 요소에는 슬라이더 방향에 따라 ui-slider-horizontal 또는 ui-slider-vertical 클래스도 있습니다.
ui-slider-handle: 슬라이더 핸들.
ui-slider-range: 범위 옵션을 설정할 때 사용되는 선택된 범위입니다. 범위 옵션이 "min" 또는 "max"로 설정된 경우 요소에는 각각 추가 ui-slider-range-min 또는 ui-slider-range-max 클래스가 있습니다.
예
간단한 jQuery UI 슬라이더.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑块部件（Slider Widget）演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<style>#slider { margin: 10px; } </style>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
$( "#slider" ).slider();
</script>
</body>
</html>더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습을 방문하세요! !
관련 추천: "jQuery Tutorial"
위 내용은 Jquery의 슬라이더 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
