2011-06-20 32 views
3

私は検索しましたが、いくつかの同様の投稿がありましたが、動作させることができません。私はそれが真実であることを知っていますが、私のコアスキルはPHPなので、JQueryとJQueryのUIは全く新しいので、どんな助けでも大歓迎です。以下はJQueryの垂直スライダーのコードです。Bind Mouse Wheel to Jquery UI Slider

$("#VerticalScrollBar").slider({  
    orientation: "vertical", 
    change: VerticalHandleChange, 
    slide: VerticalHandleSlide, 
    min: -100, 
    max: 0 
}); 

と機能

function VerticalHandleChange(e, ui) { 
var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height(); 
$(".VerticalScroll").animate({ 
    scrollTop: -ui.value * (maxScroll/100) 
}, 1000); 

function VerticalHandleSlide(e, ui) { 
var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height(); 
$(".VerticalScroll").attr({ 
    scrollTop: -ui.value * (maxScroll/100) 
}); 

縦スライダーが正常に動作しますが、今私は、マウスホイールのサポートを統合する必要があります。 Brandon Aaron(jquery-mousewheel ver。3.0.4)がマウスホイールプラグインをダウンロードしましたが、上記のコードでどのように使用するのか分かりません。誰もがこれで私を助けることができますか?再度、感謝します。私はこのソリューションを作ってみたいくつかのテストを行った後

答えて

5

$('#sliderid').on('mousewheel DOMMouseScroll', function(e) { 
    var o = e.originalEvent; 
    var delta = o && (o.wheelDelta || (o.detail && -o.detail)); 

    if (delta) { 
     e.preventDefault(); 

     var step = $(this).slider("option", "step"); 
      step *= delta < 0 ? 1 : -1; 
     $(this).slider("value", $(this).slider("value") + step); 
    } 
}); 

+0

おかげで(jQueryの1.10.1使用)クローム/ Firefoxの/オペラ で正常に動作するようです!それは動作しますが、私にとってはもっと便利でした。\t 逆スクロール ステップ* =デルタ<0? -1:1; –