Binden, Mausrad, Jquery UI Slider

Habe ich durchsucht und es wurden ein paar ähnliche Beiträge, aber ich kann nicht scheinen, um es zu arbeiten. Ich weiß, dass es ein Klischee, aber ich bin Recht neu mit JQuery und JQuery UI als meine Kernkompetenz ist PHP, so dass jede Hilfe wird sehr geschätzt. Unten sind die codes, die ich für die JQuery vertikaler Schieberegler.

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

und die Funktionen

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)   
});

Den vertikalen Schieberegler funktioniert einwandfrei, aber nun muss ich das integrieren, Mausrad-Unterstützung. Heruntergeladen habe ich das Maus-Rad-plugin von Brandon Aarons (jquery-mousewheel-ver. 3.0.4) aber ich habe keine Ahnung, wie es mit meinen codes oben. Wer kann mir dabei helfen? Nochmals vielen Dank.

InformationsquelleAutor asyadiqin | 2011-06-20
  1. 5

    Nachdem ich einige tests, die ich habe, kommen mit dieser Lösung:

    $('#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);
    }
});

    Scheint gut zu funktionieren, die auf Google Chrome/Firefox/Opera
    (mit jQuery 1.10.1)

    • Danke! Es funktioniert, aber für mich war es bequemer zu inverse Schrittweite *= delta < 0 ? -1 : 1;
    InformationsquelleAutor Romuald Brunet
Schreibe einen Kommentar