2012-12-10 25 views
76

jQuery UIスライダーを既にスタイリングして実装しました。それはモバイルで適切にスケールされていますが、タップとドラッグは許可されません。代わりに、スライダを移動させたい場所にタッチする必要があります。 jQueryモバイルUIはこれをサポートしていますが、すでにそこにあるものに投資する時間があります。jQuery UIスライダー携帯端末でのタッチ&ドラッグ/ドロップのサポート

私たちが望む機能: Here
我々が使っているもの:Here

をデスクトップであなたは違いを見分けることはできません。携帯端末では明らかです。

誰でもこのサポートをjquery UIに追加する方法を知っていますか?

$("#cameraSlider").slider({ 
    value: 2, 
    min: 1, 
    max: 3, 
    step: 1, 
    slide: function(event, ui) { 
    cameramen = ui.value; 
    return calcTotal(); 
    } 
}); 

おかげで、 セス

+1

[jQuery UIスライダのタッチデバイス上の可能な複製](http://stackoverflow.com/questions/6360249/jquery-u-sliders-on-touch-devices) – Foreever

答えて

187

jQueryのUIはタッチをサポートしていません。 jQuery-ui touch punchと一緒に使用してください。

だけのjQuery UIの後にスクリプトを追加:あなたはまた、cdnjsを使用することができます

<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> 

<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> 

注:ベターthis repoのGithub上の星を与えます。

+0

ありがとうございます。よく働く。 – Andy

+0

これは私の一日を節約! – Dr3am3rz

+0

ありがとうございます!これは本当に私の一日を節約する! –

0

このjsをリンクすることができます。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 

ありがとう。

+0

うん!それは既存の答えの最後の行です... – Seth

関連する問題