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