將「懸停」預覽支持添加到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滑塊

回答

相關問題