반응형
모바일 장치에서 jQuery UI 슬라이더 터치 & 드래그/드롭 지원
저는 이미 jQuery UI 슬라이더를 프로젝트에 스타일링하고 구현했습니다.슬라이더는 반응성이 있지만 터치하거나 끌어도 반응하지 않습니다.대신 슬라이더를 원하는 위치를 터치해야 합니다.우리는 이미 jQuery(비모바일) UI를 광범위하게 사용하고 있기 때문에 터치 및 드래그를 지원하는 jQuery 모바일 UI로 스와핑하는 것을 피하고 싶습니다.
데스크톱에서는 차이를 구분할 수 없습니다.모바일 장치에서 이는 명백합니다.
이 지원을 jquery UI에 추가하는 방법을 아는 사람?
$("#videographers").slider({
value: 2,
min: 1,
max: 3,
step: 1,
slide: function(event, ui) {
return calcTotal(ui.value);
}
});
jQueryui는 터치 지원이 없습니다.당신은 그것을 jQuery-ui 터치 펀치와 함께 사용해야 합니다.
jQueryui 다음에 스크립트를 추가하면 됩니다.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
cdnjs를 사용할 수도 있습니다.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
참고: 이 레포에게 깃허브의 별을 주는 것이 좋습니다.
그냥 이 js를 연결하면 됩니다.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
감사해요.
만약 당신이 워드프레스에 있다면, 당신은 이 코드를 기능에 사용할 수 있습니다.php:
add_action( 'wp_head', function () {
// jquery.ui.touch-punch
wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );
}, 999 );
언급URL : https://stackoverflow.com/questions/13808663/jquery-ui-slider-touch-drag-drop-support-on-mobile-devices
반응형
'programing' 카테고리의 다른 글
언제 os.name , sys.platform 또는 platform.system을 사용해야 합니까? (0) | 2023.08.05 |
---|---|
컨텐츠를 선형 레이아웃 안에 중앙에 배치하는 방법은 무엇입니까? (0) | 2023.08.05 |
Node.js에서 마이크로타임을 얻는 방법은 무엇입니까? (0) | 2023.08.05 |
이전 활동으로 돌아가는 것을 방지하는 방법은 무엇입니까? (0) | 2023.08.05 |
T-SQL, SQL Server 및 SQL의 차이점은 무엇입니까? (0) | 2023.08.05 |