Question

我正在寻找帮助使用Orbeon实现垂直菜单。以下是我正在寻找的一个例子：http://en.wikibooks.org/wiki/XForms/Vertical_Menu。

关于如何实现这一点的任何指示？这是我到目前为止所做的：

   <fr:button>
     <xforms:label ref="$form-resources/section-1/label"/>
     <xforms:toggle case="case-1" ev:event="DOMActivate" />
   </fr:button>
   <fr:button>
     <xforms:label ref="$form-resources/section-2/label"/>
     <xforms:toggle case="case-2" ev:event="DOMActivate" />
   </fr:button>
   <xforms:switch>
     <xforms:case id="case-1" selected="true()">
              ...

这很接近，但是当用户在屏幕上点击时按钮不会保持高亮显示。理想情况下，除非单击另一个按钮，否则按钮将保持高亮显示。

更新：我对可视化更感兴趣（选择要显示的表单部分的垂直按钮菜单，在显示部分时，该部分的按钮显示为切换或按下）。

Answer 1

您指向的示例是使用target pseudo-class通过CSS突出显示当前选项卡。在IE上，只有版本9以后supports the target pseudo-class，限制了这种技术的实用性。

尽管如此，如果你对此感到满意，你可以用Orbeon Forms做同样的事情。在您指向的示例中，目标将使用<a href="#tab1">进行更改。在使用Orbeon Forms的代码中，您可以使用<xforms:load>，如：

<fr:button>
    <xforms:label>Select Items</xforms:label>
    <xforms:action ev:event="DOMActivate">
        <xforms:toggle case="case-2"/>
        <xforms:load resource="#tab1"/>
    </xforms:action>
</fr:button>

如何修改Orbeon Forms的Wikibooks垂直菜单示例？

1 个答案: