터치 장치의 jQuery UI 슬라이더

jQuery UI를 사용하여 웹 사이트를 개발 중이며 터치 스크린 장치에서 볼 때 호환되지 않는 것처럼 보이는 여러 요소가 내 사이트에 있습니다. 오류가 발생하지는 않지만 동작은 옳지 않습니다.

문제의 요소는 jQuery UI에서 정의한 슬라이더 및 범위 슬라이더입니다. 터치 스크린에서 핸들을 잡는 것으로 터치를 등록하고 슬라이더를 가로 질러 핸들을 드래그 할 때 드래그하는 대신 전체 웹 페이지를 화면 측면으로 슬라이드합니다. 핸들을 탭한 다음 핸들을 끝낼 슬라이더의 위치를 ​​탭하면 작동하지만 이것은 매우 느리고 이상적이지 않습니다. 어떤 아이디어?

jqtouch 플러그인을 다운로드 한 다음 .touch([...])slider () 및 rangeslider ()에 대한 모든 호출에 연결하려고 시도했지만 작동하지 않았습니다.

감사!

업데이트 : jQuery UI 웹 사이트에서이 "패치"를 찾았습니다.

http://bugs.jqueryui.com/ticket/4143

그것은 그것이 iPhone에서 슬라이더를 용이하게한다고 말하지만, 이제 또 다른 어리석은 질문에 대해 :이 "패치"를 내 코드에 어떻게 통합합니까? 플러그인처럼 코드 시작 부분에 포함시켜야합니까?

이 라이브러리는 귀하가 찾고있는 것을 제공하는 것 같습니다.

https://github.com/furf/jquery-ui-touch-punch#readme

또한 몇 가지 예제 사용 코드가 있습니다 (단순히 플러그인 추가).

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

이것에 대한 새로운 정보를 추가하고 싶었습니다. 터치 펀치는 Ipad 및 Android 장치에서 잘 작동합니다. 그러나 슬라이더는 Windows 모바일 장치에서 작동하지 않습니다 (최신 버전의 jquery ui 및 Touch 펀치 사용).

수정은 매우 간단합니다. .ui-slider-handle에 다음 CSS 규칙을 추가하기 만하면됩니다.

-ms-touch-action: none;
touch-action: none;

도움이 되었기를 바랍니다

@dazbradbury가 제안 했듯이 touchpunch 라이브러리는 마우스 이벤트를 터치 이벤트로 변환하는 데 도움이 될 수 있습니다. .draggable ()의 매개 변수는 슬라이더의 이동을 제한하므로 슬라이더 부모를 넘어서 이동할 수 없습니다.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

편집 : 이미 Jquery UI 슬라이더를 사용중인 경우 터치 펀치 라이브러리 만 포함하면됩니다. .ui-slider-handle에 대해 .draggable ()을 호출하지 마십시오. 기존 기능을 덮어 쓰게됩니다.

나는 같은 문제가 있었다. 저는 jQuery UI의 슬라이더에 정교한 슬라이더 UI를 개발하여 모바일에서 전혀 작동하지 않는다는 것을 깨달았습니다. 여기에 나열된 제안을 시도했지만 jQuery UI Slider만을 기반으로하는 사용자 지정 솔루션이 있으므로 작동하지 않았습니다.

noUiSlider를 사용 하십시오 .

jQuery UI 슬라이더 위에 구축 한 것과 같은 모든 정교한 기능 (및 훨씬 더)을 수행합니다. 모바일 장치에서 아름답게 작동하며 스타일도 쉽습니다.