2

我不是 JSF 专业人士，我做 HTML/CSS/JS 布局。但是我的Java开发人员遇到了一个问题，特别是单选按钮。这是我们最后想要的布局： 在此处输入图像描述

如您所见，几乎所有内容都是自定义的，单选按钮、输入选择框......

现在我们面临的主要问题是 JSF 框架会自动将所有这些内容输出到一个表格中（作为设计师，我一开始不喜欢这个表格）。然后我们还需要一个非常自定义的单选按钮标签。

我尝试了很多不同的东西，但我会在这里给你一个基本的代码示例：

    <h:selectOneRadio value="#{user.favColor1}">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
    </h:selectOneRadio>

还有另一种方法吗？我们做错了吗？你知道我怎么能做这样的事情吗？

谢谢！

4

2 回答 2

4

PrimeFaces 得到了您正在寻找的确切组件

看看SelectOneRadio - 自定义布局

<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>

    <h:panelGrid columns="3" cellpadding="5">
        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
        <h:outputLabel for="opt1" value="Red" />
        <p:spinner />

        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
        <h:outputLabel for="opt2" value="Green" />
        <p:inputText />

        <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
        <h:outputLabel for="opt3" value="Blue" />
        <p:calendar />
    </h:panelGrid>
</p:outputPanel>

他们的例子甚至看起来像你的（收音机旁边的微调器）

于 2012-04-16T05:45:19.543 回答
-2

在 JSF 中，您可以像这样设置无线电组的样式：

.myRadioGroup input {
  float: left;
  margin-left: -13px;
  margin-top: 3px;
}

.myRadioGroup label {
  margin-left: 12px;
  display: block;
}

<h:selectOneRadio value="#{user.favColor1}" styleClass="myRadioGroup">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
</h:selectOneRadio>
于 2012-04-16T05:30:14.497 回答