XPages Dojo Horizo​​ntalSlider onchange

Question

我几天来一直在寻找如何在我的 xpage 上实现 Dojo Horizo​​ntalSlider 控件。我发现了大约 4 个不同的代码示例。我也一遍又一遍地尝试简单地从控件的 Dojo 表单列表中拖动控件并调整属性。无论我尝试多么简单，我都无法让它工作。 我想在 0 到 10 之间滑动并将整数捕获到编辑框控件中。

有人有这方面的例子和代码吗？

Answer 1

这是一个用于 0 到 10 之间值的滑块的示例，它在更改时将当前整数值写入编辑框：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:djHorizontalSlider
        id="djHorizontalSlider1"
        value="#{viewScope.sliderNumber}"
        style="margin: 5px;width:200px; height: 20px;"
        minimum="0"
        maximum="10">
        <xp:this.converter>
            <xp:convertNumber
                integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
        <xe:djSliderRule
            id="djSliderRule2"
            style="height:5px;"
            count="11"
            container="bottomDecoration">
        </xe:djSliderRule>
        <xe:djSliderRuleLabels
            id="djSliderRuleLabels2"
            container="bottomDecoration"
            style="height:10px;font-size:75%;color:gray;">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </xe:djSliderRuleLabels>
        <xp:eventHandler
            event="onChange"
            submit="true"
            refreshMode="partial"
            refreshId="inputText1">
            <xe:this.action><![CDATA[#{javascript:
                 viewScope.inputNumber = viewScope.sliderNumber
            }]]></xe:this.action>
        </xp:eventHandler>
    </xe:djHorizontalSlider>
    <xp:inputText
        id="inputText1"
        value="#{viewScope.inputNumber}">
        <xp:this.converter>
            <xp:convertNumber
                integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
    </xp:inputText>
</xp:view>

在事件onChange 中，对编辑字段“inputText1”执行部分刷新。滑块的当前值转换为整数值并写入viewScope.sliderNumber。从那里将其复制到绑定到编辑字段的viewScope.inputNumber。部分刷新后，该值在编辑字段中可见。