jQuery UI Slider -> con soporte para mousewheel?

Question

como ya sabrá que soy nuevo en jQuery, por lo que las mejoras de código que no pertenecen a este tema todavía son muy permitidas.

Este es mi código HTML:

<div style="display: inline-block; width: 120px;"> 
    <div> 
     Bananas: 
     <br /> 
     <input id="bananas_amount" /> 
     <input id="bananas_amount_percent" /> 
    </div> 
    <br /> 
    <div id="bananas" style="height:200px;"></div> 
</div> 

y este es mi horrible js-código:

$("#bananas").slider({ 
    orientation: "vertical", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 20, 
    step: 5, 
    slide: function(event, ui) { 
     $("#bananas_amount_percent").val(ui.value + " %"); 

      // the code displays a percentage by standart, but I need the real value, too: 
      var bananas_amount_percent = $("#bananas_amount_percent").val(); 
      var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); 
      var bananas_amount = Math.round((weight/100) * bananas_amount_percent); 
      $("#bananas_amount").val(bananas_amount + " g"); 
    } 
}); 
$("#bananas_amount_percent").val($("#bananas").slider("value") + " %"); 

// again the real value (else the value would not be updatet on reload-reset) 
var bananas_amount_percent = $("#bananas_amount_percent").val(); 
var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); 
var bananas_amount = Math.round((weight/100) * bananas_amount_percent); 
$("#bananas_amount").val(bananas_amount + " g"); 

(peso es 200)

Sin embargo, está funcionando, excepto uno "pequeño" detalle: ¡no con la rueda del mouse! Ya descubrí que necesito esta extensión: https://github.com/brandonaaron/jquery-mousewheel/downloads

Pero realmente he absolutamente ninguna idea de cómo implementar esto a mi deslizante (he 5 en mi sitio por cierto).

Ayuda pls, Thx!

Answer 1

El complemento mousewheel es demasiado pesado para su función. Extraje la esencia Funciona muy bien en todos los navegadores.

$('#bananas').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = 0, element = $(this), value, result, oe; 
    oe = e.originalEvent; // for jQuery >=1.7 
    value = element.slider('value'); 

    if (oe.wheelDelta) { 
     delta = -oe.wheelDelta; 
    } 
    if (oe.detail) { 
     delta = oe.detail * 40; 
    } 

    value -= delta/8; 
    if (value > 100) { 
     value = 100; 
    } 
    if (value < 0) { 
     value = 0; 
    } 

    result = element.slider('option', 'slide').call(element, e, { value: value }); 
    if (result !== false) { 
     element.slider('value', value); 
    } 
    return false; 
}); 

EDIT: cambió #slider-#bananas

Edit2: añadió activación slide caso

Puesto que está utilizando solamente value propiedad que pase por objeto parámetro sólo con esta propiedad. Si necesita algo más, recuerde agregarlo al código del mouse.

Edit3: el cambio agregado capacidad de liberación cuando slide función devuelve false (al igual que en la documentación)

ACTUALIZACIÓN: delta muestra no sólo la dirección de la rueda, pero también tiene un significado más profundo. Describe el número de píxeles para desplazarse. La configuración predeterminada para el desplazamiento es de 3 líneas, que es de 120 píxeles, pero puede diferir.
Si desea recuperar sólo la dirección de la rueda, cambiar esta situación:

value -= delta/8; 

a esto:

value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0; 

aunque delta === 0 nunca debe ocurrir.

ACTUALIZACIÓN: Se agregó una parte para las versiones más recientes de jQuery (e.originalEvent).

Answer 2

No he utilizado el plugin rueda del ratón antes, pero por lo que he visto que se debe utilizar la siguiente manera:

$("#DivName").mousewheel(function(event, delta) { 
    //Trigger slide event 


     //Prevent the default mouse wheel 
     event.preventDefault(); 

}); 

Con DivName siendo probablemente su deslizador y creo que Delta es la dirección de desplazamiento (en unidades) Así que supongo que es negativo, positivo hacia abajo.