0

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

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

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

4

2 回答 2

2

感谢 jQuery 论坛，我能够完成我需要的工作。下面是我基于这个线程的解决方案：http: //forum.jquery.com/topic/add-hover-preview-support-to-jquery-ui-slider

它工作得很好，但我仍然遇到一个 Firefox 问题。我已将错误分解到一个新线程中：jQuery mousemove errattic 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);
    }
});
于 2012-07-16T15:41:52.450 回答
0

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

于 2012-07-14T22:43:35.923 回答