0

我对样式有疑问，h:selectOneListbox非常感谢一些建议。

在 bean 中，我有一个循环，其中从文件中读取值和标签并使用h:selectOneListbox. 大部分条目显示正常并且可以选择，但有几个条目显示但被禁用。这是 bean 中的一段代码，其中初始化了条目，并设置了一个标志来指定是否禁用给定条目。

// private method for initialization

// Initialization code

SelectItem item = new SelectItem();
for (i=0; i<numEls[set]; i++) {
    item = null;
    if (itemLabels[set][i].contains(disabledLabel))
        item = new SelectItem(itemValues[set][i], itemLabels[set][i], "", true); // Disabled
    else
        item = new SelectItem(itemValues[set][i], itemLabels[set][i]);           // Enabled
    if (set == 0)
        items0[i] = item;
    else
        items1[i] = item;

    // Rest of the initialization code

}

public String getElement0() {
    return element[0];
}

public void setElement0(String element) {
    this.element[0] = element;
}

// Other getters and setters, including for element[1] etc.

这可以正常工作，相应的 xhtml 代码的一部分是：

<h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}"
                    enabledClass="itemEnabled" disabledClass="itemDisabled">
    <f:selectItems value="#{abundance.items0}"/>
</h:selectOneListbox>

在 CSS 文件中有以下两行：

.itemEnabled {font-family:monospace;}
.itemDisabled {font-family:monospace;}

使用 Firefox，项目的格式正确，禁用的项目也被格式化，但显示为灰色。由于某种原因，即使样式 itemDisabled 与 itemEnabled 完全相同，它仍然是灰色的。如果 itemDisabled 被省略，它仍然是灰色的，但不是等宽的，这是可以预料的。

但是，使用 Internet Explorer 或 Chrome 时，文本不是等宽的，启用或禁用的文本也不是。我该如何解决？另外，我注意到 的属性h:selectOneListbox还包括 styleClass，但是这与 enabledClass 和 disabledClass 有什么关系？

有人可以帮我解决这个问题，以便使用所有主要浏览器正确设置输出样式吗？

好的，非常感谢，我刚刚开始使用 PrimeFaces。

但是，我确实有另一个与此相关的问题。我尝试将 f:validateDoubleRange 与一系列有效输入值一起使用，如果输入超出指定范围，则使用 h:message 生成错误消息。问题是当我这样做时，当我单击一个按钮来更新菜单中的内容时，不会触发一个动作，否则它会起作用。

这是我的 xhtml 代码的更完整列表：

<h:selectOneMenu id="abundanceSet0" value="#{abundance.abunSet0}" style="height:25px; width:180px;">
  <f:selectItems value="#{abundance.abunSetMap}"/>
</h:selectOneMenu>
<p:spacer width="37" height="0"/>
<p:commandButton value="Select Set" actionListener="#{abundance.selectSet0}" update="abundances0"/>
<br/><br/>
<h:outputText value="Specify the abundances of individual elements:"/>
<h:panelGrid columns="3" cellpadding="2">
  <h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}"
                          enabledClass="itemEnabled" disabledClass="itemDisabled">
    <f:selectItems value="#{abundance.items0}"/>
  </h:selectOneListbox>
  <h:panelGrid style="text-align:center;">
  <p:commandButton type="button" value="Readme" onclick="openPopup(600,500,'htmlPopup/expAbundances')" styleClass="longButton"/>
    <h:inputText id="update0" size="4" value="#{abundance.updateAbun0}"/>
    <p:commandButton value="Update Abundance" actionListener="#{abundance.update0}"
                     styleClass="longButton" update="abundances0">
      <f:validateDoubleRange minimum="-9.99" maximum="12.00"/>
  </h:panelGrid>

  <ui:include src="abunExplain.xhtml"/>

</h:panelGrid>

动作丰度.selectSet0 和丰度.update0 以及其他动作不会被触发。此处的文件包含在显示整个页面的主文件中，甚至验证该文件中的条目也会阻止操作起作用。顺便说一句，您可以忽略“abunExplain.xhtml”，它只是在视图中添加了一些静态文本。

目前我在我的 bean 中使用一些方法来拦截输入值并确保它们是范围内的有效数字。

如果您或某人对此有一些想法，我将不胜感激。

4

1 回答 1

1

这是特定于 HTML 的问题，而不是特定于 JSF 的问题。in a生成的 HTML<option>元素本身已经非常有限的 CSS 样式选项。只有字体颜色可以跨浏览器更改，其他任何内容都取决于浏览器。<f:selectItem(s)><h:selectOneListbox>

最好的办法是使用<select><option>JavaScript<ul><li>将<p:selectOneListbox>. 允许完全的<ul><li>CSS 样式自由。你甚至可以为此使用一些独立的 jQuery (UI) 插件——但是如果 PrimeFaces 已经在这样做，为什么还要重新发明轮子呢。

于 2013-01-02T12:50:31.343 回答