jQuery UI滑塊動態內聯樣式進度

Question

我在主幹視圖中有一個jQuery滑塊。該視圖動態更新滑塊的位置。

我想將內聯樣式添加到綁定到滑塊值的div.ui-slider-range。

當我有一個從滑塊更改事件回調調用的視圖方法的時刻。這似乎沒有附加風格。我沒有得到任何錯誤，並且我已經驗證了在值更改時調用了view方法。

我已經注意到，div.ui-slider-range有width屬性通過jquery ui內聯應用到它。我猜這是給我的問題。無論如何，我可以讓jquery ui爲我添加內聯樣式？

任何幫助，將不勝感激。

編輯： 這似乎是我如何描述線性梯度道具的問題。 如果我將它設置爲線性漸變（左，黑色，白色），它按預期工作。任何想法？

render:()=> 
    @$el.slider 
    range: 'min' 
    min: 0 
    max: 100 
    value: 0 
    animate: true 
    step: 0.01 
    change: (e, ui) => 
     @updateStyle ui.value 
    @uiRange = @$el.find('.ui-slider-range') 

updateStyle: (width) -> 
    @uiRange.css 'backgound', "linear-gradient(left, #6641cd, #6641cd #{width}%, #15b2e7)" 

Answer 1

好了，原來這是與jQuery的問題，也許只是一些需要更好的文檔

問題在於使用jQuery添加線性漸變道具。由於線性梯度道具需要一個取決於系統的前綴，因此您需要確保添加正確的前綴。如果您在Chrome上開發，則需要添加-webkit-前綴，否則jQuery將不會添加該屬性。如果你是Firefox，你需要-moz-前綴。如果系統中沒有正確的前綴，jQuery只會忽略該css屬性。

現在我遇到的問題是試圖添加所有的背景前綴道具。看起來，雖然jQuery只會添加最後一個屬性，並且如果最後一個屬性不是正確的前綴，它將忽略所有這些屬性。或者更有可能是單獨添加每個道具，因爲它們都是背景道具，每道道具都會覆蓋最後一道道具。