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);