XForms/Select1

動機

您需要一個輸入控制元件，允許使用者從可能的專案列表中選擇一個且只有一個專案。您在表單上擁有足夠的空間來顯示所有可能的價值。您還希望使用者看到的內容和放置在例項中的內容不同。

方法

任何時候您希望使用者從可能的選項列表中進行單選，您都可以使用 XForms select1 控制元件。此控制元件有兩種變體，一種用於顯示所有值（也稱為單選按鈕），另一種用於呈現下拉列表，因此佔用更少的螢幕區域。

可能的選項列表中的每個專案都必須有一個 item，在 item 中必須有一個 value 和一個可選的 label。value 是將插入到使用 ref 屬性引用的資料元素中的字串。ref 屬性指向您模型中的資料元素。

螢幕影像

工作 XForms 示例的連結

Select1 單選按鈕

請注意，小寫的 value 將顯示在 select1 控制元件下方，以向您展示 select1 控制元件是如何更改模型的。只有 labels 顯示給使用者。

示例程式

在下面的示例中，MyModel 內部的例項變數 MyCode 將被設定為單選按鈕控制元件選擇的 value。

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms Radio Button Usng Select1 appearance="full"</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <ColorCode/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
       <p>XForms Radio Button Usng Select1 appearance="full"</p>
        <xf:select1 ref="ColorCode" appearance="full" >  
            <xf:item>
                <xf:label>Red</xf:label>
                <xf:value>red</xf:value> 
            </xf:item>
            <xf:item>
                <xf:label>Orange</xf:label>
                <xf:value>orange</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Yellow</xf:label>
                <xf:value>yellow</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Green</xf:label>
                <xf:value>green</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Blue</xf:label>
                <xf:value>blue</xf:value>
            </xf:item>
       </xf:select1>
       Output: <xf:output ref="ColorCode"/>
   </body>
</html>

測試

當您使用 full 外觀時，您應該會看到所有可能的 value。每次點選一個單選按鈕時，模型中 MyCode 的 value 都會更新，並且輸出應該自動更新。請注意，顯示的是 value（小寫），而不是 label。

更改方向為水平方向

您可以透過將 float:left 樣式應用於所有 item 元素來更改單選按鈕以使用水平佈局。

在您的 CSS 中執行以下操作

.horiz xf|item { 
  float: left; 
}

在您的 body 中，將所有 xf:item 元素包裹在一個具有 class="horiz" 的 div 中

<xf:select1 ref="my-element" appearance="full">
    <xf:label>Color: </xf:label>
    <div class="horiz">
      <xf:item>
          <xf:label>Red</xf:label>
          <xf:value>red</xf:value>
       </xf:item>
       <xf:item>
           <xf:label>Green</xf:label>
           <xf:value>green</xf:value>
       </xf:item>
       <xf:item>
           <xf:label>Red</xf:label>
           <xf:value>blue</xf:value>
       </xf:item>
     </div>
</xf:select1>

討論

您可以始終透過從 select1 元素中刪除 appearance="full" 屬性來將單選按鈕更改為下拉列表。

您還可以使用 XPath 表示式來使用 xf:itemset 元素顯示來自模型的 labels 和 values。

<xf:select1 ref="my-element">
   <xf:itemset nodeset="instance('codes')/data/item">
      <xf:label ref="label"/>
      <xf:value ref="value"/>
   </xf:itemset>
</xf:select1>

檢視其他示例以瞭解這些示例。

致謝

關於水平佈局的問題是在 2008 年 4 月釋出在 mozilla.dev.tech.xforms 郵件列表中的，解決方案由 IBM 的 Aaron 提供。

下一頁： Select1 下拉列表 | 上一頁：複選框
主頁： XForms