Javascript Enyo JS垂直滑块
我试图在enyo中编写一个垂直滑块(就像混音台上的控件)。我试图避免从头开始,所以我开始调整onyx.Slider类。我改变了从左到上,从宽到高的风格,通过一些其他的调整,它的工作。我现在一直坚持让滑块从下到上填充,因为它是垂直的,但它是从上到下填充的。提前感谢您的帮助 以下是我所做的代码更改: 在ProgressBar.js中:Javascript Enyo JS垂直滑块,javascript,css,enyo,Javascript,Css,Enyo,我试图在enyo中编写一个垂直滑块(就像混音台上的控件)。我试图避免从头开始,所以我开始调整onyx.Slider类。我改变了从左到上,从宽到高的风格,通过一些其他的调整,它的工作。我现在一直坚持让滑块从下到上填充,因为它是垂直的,但它是从上到下填充的。提前感谢您的帮助 以下是我所做的代码更改: 在ProgressBar.js中: updateBarPosition: function(inPercent) { this.$.bar.applyStyle("height", inPerc
updateBarPosition: function(inPercent) {
this.$.bar.applyStyle("height", inPercent + "%");
},
在Slider.js中(除以64是一个临时hack):
CSS:
汤姆你可以采取几种方法。最明显的(除了我第一次没有想到这一点)就是将条和条的背景/渐变进行交换。这将给你从底部填充的外观。我推荐这个 另一种方法是我在这里的JSFIDLE中所做的:(忽略加倍的updateBarPosition函数) 我没有直接修改这些文件,而是从Slider派生并重写了相应的函数,并为垂直Slider添加了一个新类 我将“填充”更改为绝对位于滑块内 现在,您的下一个问题是值“0”已完全填充,“100”已完全空。我通过修改您的calcKnobPosition以从max进行调整并反转定位逻辑来处理此问题,如本小提琴所示:
非常感谢。我也很喜欢你的书。真的帮助我开始编写应用程序。哦!谢谢你的赞美。
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;
},
/* 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%;
}
return this.max - (y / this.getBounds().height) * (this.max - this.min);