2

我正在尝试在 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%;
}

汤姆

4

1 回答 1

1

您可以采取几种方法。最明显的（除了我没有首先想到的事实）只是交换条形图和条形条的背景/渐变。这会给你从底部填充的外观。我会推荐这个。

另一种方法是我在这个 jsFiddle 中所做的：http: //jsfiddle.net/RoySutton/b9PmA/ （请忽略加倍的 updateBarPosition 函数）

我没有直接修改这些文件，而是从 Slider 派生并覆盖了适当的函数并为垂直滑块添加了一个新类。

我将“填充”更改为绝对定位在滑块内。

现在，您的下一个问题是值“0”已完全填充，而“100”则完全为空。我通过修改您的 calcKnobPosition 以从最大值调整并反转定位逻辑来处理这个问题，如这里的小提琴所示：http: //jsfiddle.net/RoySutton/b9PmA/2/

return this.max - (y / this.getBounds().height) * (this.max - this.min);
于 2013-05-15T15:26:32.643 回答