Question

我正在使用1 - 10评级等级的jQuery UI滑块。我想为滑块添加悬停支持。现在，当您滑动它时，滑块会在您增加评级范围时变为颜色。它还在滑块外显示1/10比例。

我想添加一种能力，让人们将鼠标悬停在滑块的一部分上，并将其更改为适当的颜色，并根据光标悬停的位置将1/10更改为适当的等级。但我不希望在用户单击滑块以保存评级之前触发实际更改事件。如果它们在没有单击的情况下悬停，则会恢复到原始的onload状态。

这可能吗？滑块是否提供任何悬停功能？

Answer 1

由于jQuery论坛，我能够完成所需的工作。以下是基于此主题的解决方案：http://forum.jquery.com/topic/add-hover-preview-support-to-jquery-ui-slider

它运行良好，但我仍然有一个Firefox问题。我已经将错误分解为一个新线程：jQuery mousemove erratic movements and jumpy results in Firefox

$('#user-rating-slider').slider({
    value: userRating,
    min: 0,
    max: 10,
    step: 1,
    slide: function(event, ui) {
        updateSlider(ui.value);
    },
    change: function(event, ui) {
        ...
    }
}).on({
    mousemove: function(e) {
        e.stopPropagation();

        var width = $(this).width();
        var offset = $(this).offset();

        var value = Math.round(((e.pageX - offset.left) / width) * (10 - 0)) + 0;

        updateSlider(value);
    },
    mouseout: function() {
        updateSlider(userRating);
    }
});

Answer 2

创建另一个功能，当您将鼠标悬停在新滑块上时，可以保存当前滑块状态，然后设置为悬停滑块的动画。在发布时，它会返回到保存的滑块pos。如果他们点击，它将使用与原始代码相同的滑块功能。

为jQuery UI滑块添加“悬停”预览支持

2 个答案: