jQuery UI 슬라이더 핸들을 변경하는 방법

https://stackoverflow.com/questions/1207307

05-07-2019
|

문제

핸들에 정사각형이 아닌 화살표가 있도록 재고 jQuery UI 슬라이더를 수정하고 싶습니다. 즉, 사용자 정의 이미지를 핸들로 사용하고 싶습니다.

몇 가지 튜토리얼이 있습니다.

그러나 나는 그것을 작동시킬 수 없습니다. 다음 코드는 고정식 핸들 이미지를 초래합니다.

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;}   
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({handle: '#myhandle'});
  });
  </script>
</head>
<body>
<div id="slider"><div id="myhandle"></div></div>
</body>
</html>

마치 jQuery가 내가 사용하고 싶은 것을 선택하지 않는 것처럼 MyHandle 핸들의 ID. 궁금합니다 : jQuery를 위해 플러그인이 필요합니까? 핸들 옵션? (문서화되지 않았습니다 http://docs.jquery.com/ui/slider). 아니면 이전 버전의 jQuery에서만 작동했을까요?

어떤 아이디어?

해결책

jQuery 슬라이더 핸들에 이미지를 추가하도록 변경할 수있는 CSS 클래스를 "합니다.".ui-slider-horizontal .ui-slider handle".

다음 코드는 데모를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div id="slider"></div>
</body>
</html>

나는 등록한다고 생각한다 핸들 옵션은 이전 방법이었고 jQuery-UI 1.7.2에서 더 이상 지원되지 않았습니까?

다른 팁

.ui-slider .ui-slider-handle{
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -10px;
    border-style:none; 
}

핸들을 다른 것으로 바꾸어야하는 경우, 단지 재조정하는 대신 다음과 같습니다.

초기화 전에 요소를 작성하고 추가하고 UI 슬라이더 핸들 클래스를 추가하여 사용자 정의 핸들 요소를 지정할 수 있습니다.

작업 예

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>');

$('.slider').slider({
  range: "min",
  value: 10
});

.slider .ui-state-default {
  background: none;
}
.slider.ui-slider .ui-slider-handle {
  width: 14px;
  height: 18px;
  margin-left: -5px;
  top: -4px;
  border: none;
  background: none;
}
.slider {
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="slider"></div>

당신은 또한 설정해야합니다 border:none 그 CSS 클래스에.

이 변경은 먼저 멀티 핸들 슬라이더에서만 처리합니다. APIDOC에서는 다음과 같이 볼 수 있습니다. "예를 들어, 값을 지정하면 [1, 5, 18] 하나의 사용자 정의 핸들을 만들면 플러그인이 다른 두 개를 만듭니다."

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow