Enyo JS Vertical Sliders

Question

我想在enyo中編寫一個垂直滑塊（就像在混音臺上的一個控件一樣）。我試圖避免從頭開始，所以我開始調整onyx.Slider類。我改變了從左到頂，從寬度到高度的風格，以及其他一些調整，它的工作。我現在堅持讓滑塊從下往上填充，儘管它是垂直的，但從上到下填充。預先感謝您的幫助。

這裏是代碼改變我已經做：

在ProgressBar.js：

updateBarPosition: function(inPercent) { 
    this.$.bar.applyStyle("height", inPercent + "%"); 
}, 

在Slider.js

（除以64是一個臨時劈）：

valueChanged: function() { 
    this.value = this.clampValue(this.min, this.max, this.value); 
    var p = this.calcPercent(this.value); 
    this.updateKnobPosition(p/64); 
    if (this.lockBar) { 
     this.setProgress(this.value); 
    } 
}, 
updateKnobPosition: function(inPercent) { 
    this.$.knob.applyStyle("top", inPercent + "%"); 
}, 
calcKnobPosition: function(inEvent) { 
    var y = inEvent.clientY - this.hasNode().getBoundingClientRect().top; 
    return (y/this.getBounds().height) * (this.max - this.min) + this.min; 
}, 

CSS：

/* ProgressBar.css */ 
.onyx-progress-bar { 
    margin: 8px; 
    height: 400px; 
    width: 8px; 
    border: 1px solid rgba(15, 15, 15, 0.2); 
    border-radius: 3px; 
    background: #b8b8b8 url(./../images/gradient-invert.png) repeat-x; 
    background-size: auto 100%; 
} 
.onyx-progress-bar-bar { 
    height: 100%; 
    border-radius: 3px; 
    background: #58abef url(./../images/gradient.png) repeat-x; 
    background-size: auto 100%; 
} 

Tom

Answer 1

您可以採取幾種方法。最顯而易見的（除了我第一次沒有想到的事實）只是交換了酒吧和酒吧的背景/漸變。這會給你從底部填充的外觀。我會推薦這個。

另一種方法是我在這的jsfiddle這裏所做的：http://jsfiddle.net/RoySutton/b9PmA/（不要忽略了一倍updateBarPosition功能）

而是直接修改這些文件，我從滑塊導出並重寫了相應的功能，並增加了一個新的類爲垂直滑塊。

我改變了'填充'以絕對定位在滑塊內。

現在，您的下一個問題是值「0」已完全填滿，「100」完全空了。我處理，通過修改你的calcKnobPosition從最大調整和反相的定位邏輯，看到在這個小提琴這裏：http://jsfiddle.net/RoySutton/b9PmA/2/

return this.max - (y/this.getBounds().height) * (this.max - this.min);