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代码的更完整列表：

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

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

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

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

Answer 1

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

您最好的办法是使用JavaScript将<select><option>转换为<ul><li>，这正是大多数JSF组件库与PrimeFaces <p:selectOneListbox>所做的一样。 <ul><li>允许完整的CSS样式自由。你甚至可以使用一些独立的jQuery（UI）插件 - 但是为什么重新发明轮子如果例如PrimeFaces已经做到了这一点。

样式h：selectOneListbox

1 个答案: