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

我使用的是1 - 10评分级别的jQuery UI滑块。我想添加悬停支持滑块。现在，当您滑动它时，滑块会在您提高评分等级时变换颜色。它还在滑块外部显示1/10比例。将“悬停”预览支持添加到jQuery UI滑块

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

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

来源

2012-07-14 ATLChris

这需要一个hackish的，相当复杂的方法。 – undefined 2012-07-14 22:19:52

@Raminson你有没有推荐的方法或可能的代码示例？ – ATLChris 2012-07-14 22:39:33

您可以创建透明跨度元素，并在悬停更改它们的更改背景时，我为我的网站创建了自定义滑块，但它没有悬停状态。 http://htmlpack.com/order.html – undefined 2012-07-14 23:18:48

感谢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); 
    } 
});

来源

2012-07-16 15:41:52 ATLChris

我相信你应该更新这个:)作为一个注释在这里：用mouselease替换mouseout修复Firefox的问题。 – alpera 2014-01-04 00:39:47

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

来源

2012-07-14 22:43:35

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

回答

相关问题