XForms/范围

注意

这些示例似乎无法在 FireFox 3 XForms 附加组件中使用。滑块在 XSLTForms（r406）中隐藏。

动机

您希望使用范围控件或“滑块”来设置表单中的数值。

从连续值范围内选择

范围是 XForms 规范的一部分，它允许用户在不使用键盘的情况下从一系列值中选择一个数值。这对于使用 SmartBoard 等交互式学习环境的教师来说非常理想。

XForms 范围有四个属性

开始 - 范围的下限
结束 - 范围的上限
步骤 - 输出变化的增量
增量 - 如果表单应将连续值发送到模型，则为 true，否则为 false。默认值为 false。

这些属性必须绑定到具有数值数据类型的元素。为此，您必须在模型中添加以下绑定语句

<xf:bind nodeset="/data/my-int" type="xs:integer"/>

<xf:bind nodeset="/data/my-decimal" type="xs:decimal"/>

用户界面

此应用程序中有三个范围控件。范围的值在右侧。

链接到 XForms 应用程序

基本范围

使用绑定设置范围

示例用户界面

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <head>
        <title>XForms Submit Example</title>
        <style type="text/css">
            body {
            font-family: Helvetica, sans-serif;
            }
        </style>
        <xf:model>
            <xf:instance xmlns="">
                <data>
                    <data1>3.14159</data1>
                    <data2>6</data2>
                    <data3>66</data3>
                </data>
            </xf:instance>
            <!-- you MUST bind each data type to the decimal type for the range control to work -->
            <xf:bind nodeset="/data/data1" type="xs:decimal" />
            <xf:bind nodeset="/data/data2" type="xs:decimal" />
            <xf:bind nodeset="/data/data3" type="xs:decimal" />
        </xf:model>
    </head>
    <body>
        <xf:range ref="data1" start="1" end="5" step="1" incremental="true">
            <xf:label>Data1: </xf:label>
        </xf:range>
        <xf:output ref="data1">
            <xf:label> Value= </xf:label>
        </xf:output>
        <br />
        <xf:range ref="data2" start="1" end="10" step="1"  incremental="true">
            <xf:label>Data2: </xf:label>
        </xf:range>
        <xf:output ref="data2">
            <xf:label> Value= </xf:label>
        </xf:output>
        <br />
        <xf:range ref="data3" start="1" end="100" step="5"  incremental="true">
            <xf:label>Data3: </xf:label>
        </xf:range>
        <xf:output ref="data3">
            <xf:label> Value= </xf:label>
        </xf:output>
    </body>
</html>

测试

使用鼠标选择三个范围控件之一。将值拖动到左右。您应该注意到右侧的值也会更新。

第一个控件仅选择 1 到 5 之间的十进制数。第二个使用步骤仅返回整数。最后一个的范围是 1 到 100，增量为 5。请注意，值为 66，并且无法设置 62 到 65 之间的值。

讨论

范围控件的上限和下限值也可以直接在模型中设置。XML Schema 提供了一个 minValue 和一个 maxValue，可以用来调整范围控件的限制。

W3C 规范

以下是 W3C 网站上的规范：W3C 范围规范

下一页：发送 | 上一页：控制按钮外观
首页： XForms