javascript – jQuery UI Slider – >鼠标滚轮支持?

前端之家收集整理的这篇文章主要介绍了javascript – jQuery UI Slider – >鼠标滚轮支持?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题代码改进.

这是我的HTML代码

@H_404_7@

这是我可怕的js代码

@H_404_7@$( "#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" );

(重量是200)

然而,除了一个“小”细节之外,它正在工作:不是用鼠标滚轮!
我已经发现我需要这个扩展名:https://github.com/brandonaaron/jquery-mousewheel/downloads

但我真的完全不知道如何将这个实现到我的Slider(我的网站上的5个btw).

帮帮忙,
谢谢!

最佳答案
鼠标滚轮插件太重了它的作用.我提取了精华.适用于所有浏览器.

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

编辑:将#slider更改为#bananas

EDIT2:添加了触发幻灯片事件

因为您只使用value属性,所以我只传递参数对象,只有这个属性.如果您还需要更多功能,请记住将其添加到鼠标滚轮代码中.

EDIT3:当幻灯片功能返回false时添加了更改取消功能(就像在文档中一样)

更新:delta不仅显示车轮方向,还具有更深的含义.它描述了要滚动的像素数.滚动的默认设置是3行,即120像素,但它可以不同.
如果您只想检索车轮方向,请更改:

@H_404_7@value -= delta / 8;

对此:

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

虽然delta === 0应该永远不会发生.

更新:为更新版本的jQuery(e.originalEvent)添加了部分.

猜你在找的jQuery相关文章