css - 样式 h :selectOneListbox

Question

我对 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 代码的更完整 list :

<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>

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

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

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

Answer 1

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

最好的办法是使用 JavaScript 来转换 <select><option>进入 <ul><li> ，这正是大多数 JSF 组件库正在做的事情，例如带有 <p:selectOneListbox> 的 PrimeFaces . <ul><li>允许完全的 CSS 样式自由。您甚至可以为此使用一些独立的 jQuery (UI) 插件——但如果 PrimeFaces 已经在这样做，为什么还要重新发明轮子。