SAPUI5如何实现阈值滑块(如在WebDynpro中)

Question

我目前正面临着在SAPUI5中实现滑块的挑战,就像Webdynpro的Threshold-Slider一样,看起来像这样.

你会怎么做？它是高度动态的,比例(可以是5个值,可以是3个值等),描述取决于比例值......

目前我只在API中找到Slider,但我怀疑这是可以实现的......任何想法？

---

18.06.2015:目前我正在努力扩展sap.ui.commons.Slider,我现在得到的东西远离我试图实现的目标:

• 单击滑块时,通过渲染器更改背景颜色(每个值应具有另一个颜色
• 右侧的文本字段和左侧的链接(可选部分,着色更重要)

我得到了什么......

sap.ui.commons.Slider.extend("my.Slider", {
    renderer : {
        renderInnerAttributes : function(oRm, oControl) {
            console.log(oRm); // try to find out, what I re-style
            console.log(oControl); // try to find out, what I re-style
            oRm.addStyle('background-color', '#ffff00');  // no effect

        },
    }
});

var oSlider6 = new my.Slider({
    id : 'Slider6',
    tooltip : 'Slider6',
    width : '500px',
    min : 1,
    max : 4,
    value : 0,
    totalUnits : 4,
    smallStepWidth : 1,
    stepLabels : true,
    labels : [
        "Bad", "Medium", "Good", "Very Good"
    ]
});

return oSlider6;

Answer 1

我认为实现这一点的最简单方法是复制 sap.m.Slider 并修改它，或者使用 UI5 扩展机制继承 sap.m.Slider 并对其进行样式化。或者您可以扩展 sap.m.ProgressIndicator 并使其具有交互性，但这会需要更多工作。

所有基本功能都已在滑块中（比例、值的数量等），您可以轻松修改背景颜色和手柄的样式。可以添加文本值的链接，并在其旁边添加标签控件。

有关如何使用 UI5 扩展机制的更多详细信息，请查看有关自定义控件的 YouTube 视频： https://www.youtube.com/watch ?v=4KPS2-LHoO0

希望有帮助，

迈克尔