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

Question

我目前面临的挑战是在SAPUI5中实现一个与Webdynpro的Slider完全类似的Slider，它看起来像这样。

​

​

你会怎么做？它具有很高的动态性，标度(可以是5值，可以是3值等)，其描述取决于标度值。

目前我只在API中找到滑块，但我怀疑它是否可以实现.有什么想法吗？

18.06.2015:目前我正在努力扩展sap.ui.commons.Slider，我现在得到的是远离我努力实现的目标：

• 单击滑块时，通过呈现器更改背景颜色(每个值应具有另一种颜色)
• 右侧的Textfield和左侧的链接(可选的部分，着色更重要)

我所得到的..。

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并使其具有交互性，但这将是更多的工作。

滑块中已经有了所有的基本功能(缩放、数值数、.)你可以很容易地修改手柄的背景颜色和样式。一个文本值的链接可以在它旁边添加一个label控件。

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

希望能帮上忙

迈克尔

Answer 2

您还可以选择一个d3js控制。无论哪种方式都会有一些变化。可以在xml视图中添加样式。通过在css文件中添加css，可以使它们在视觉上与所需的控件相同。在默认情况下，滑块有最小、最大和步长。在change事件中，可以添加或删除样式类(addStyleClass/removeStyleClass)以显示不同的颜色。您可以单独显示的文本和处理格式。如果您想要将其全部放在一个控件中，则应该检查此页。