XPage Dojo Horizo​​ntalSlider onchange

Question

我一直在寻找如何在我的xpage上实现Dojo Horizo​​ntalSlider控件的几天。我找到了大约4个不同的代码示例。我也一遍又一遍地尝试从Dojo Form控件列表中拖动控件并调整属性。无论我多么简单地尝试它，我都无法工作。 我想在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上，对编辑字段＆＃34; inputText1＆＃34;执行部分刷新。滑块的当前值将转换为整数值并写入viewScope.sliderNumber。从那里它被复制到绑定到编辑字段的viewScope.inputNumber。部分刷新后，该值在编辑字段中可见。