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