jQuery UI Slider - 和amp;gt;有鼠标滚轮支持
问题说明
你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题的代码改进。
as you may already know I'm new to jQuery, so Code-Improvements not belonging to this theme are still very allowed.
这是我的HTML代码:
This is my HTML-Code:
<div style="display: inline-block; width: 120px;">
<div>
Bananas:
<br />
<input />
<input />
</div>
<br />
<div style="height:200px;"></div>
</div>
这是我可怕的js代码:
And this is my horrifying js-code:
$( "#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 /下载
However, it's working, except one "little" detail: not with the mousewheel! I already found out that I need this extension: https://github.com/brandonaaron/jquery-mousewheel/downloads
但我真的完全不知道如何将这个实现到我的Slider(我在我的网站上有5个顺便说一句)。
But I've really absolutely no idea how to implement this to my Slider (I've 5 on my Site btw).
帮助pls,
Thx!
Help pls, Thx!
正确答案
鼠标滚轮插件太重了它的作用。我提取了精华。适用于所有浏览器。
The mousewheel plugin is too heavy for its role. I extracted the essence. Works great in all browsers.
$('#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:添加了触发幻灯片
事件
added triggering slide
event
因为你只使用 value
属性,所以我只传递参数对象,只有这个属性。如果您还需要更多内容,请记住将它添加到鼠标滚轮代码中。
Because you are using only value
property I pass for parameter object with only this property. If you will need something more, remember to add it to the mousewheel code.
EDIT3:当幻灯片函数返回
false
(就像在文档中一样)
added change cancelling ability when slide
function returns false
(just like in the documentation)
更新: delta
不仅显示车轮方向,还具有更深层的含义。它描述了要滚动的像素数。滚动的默认设置是3行,即120像素,但它可以不同。
如果您只想检索方向盘,请更改:
UPDATE: delta
shows not only the wheel direction, but also has a deeper meaning. It describes number of pixels to scroll. The default setting for scrolling is 3 lines which is 120 pixels, but it can differ.
If you want to retrieve only direction of wheel, change this:
value -= delta / 8;
到此:
value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;
虽然 delta === 0
永远不应该发生。
更新:为更新版本的jQuery(e.originalEvent)添加了部分。
UPDATE: Added part for newer versions of jQuery (e.originalEvent).
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /reply/detail/tanhcgkjfg
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
希伯来语的空格句子标记化错误
it1352 06-22 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20