Question

我正在浏览寻找解决方案很长一段时间，但我找不到合适的答案。我正在使用RichFaces库开发JSF Web应用程序。应用程序支持不同的区域设置，用户可以通过从下拉列表中选择来更改它们。我希望下拉列表中的项目在区域设置名称中包含标记图标。

不幸的是，我找不到使用JSF的方法。

下拉列表的xthml代码为：

<h:panelGroup>
    <h:form id="languageForm" prependId="false">
        <h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
        <h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
            <f:selectItems value="#{localeBean.locales}" />
        </h:selectOneMenu>
    </h:form>
</h:panelGroup>

标志图标只需使用纯HTML和JQuery完成，就像我在这里找到的那样：http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/

要将图标放在下拉列表项中，我必须为列表中的每个元素应用css，例如：

#en { 
    background-image: url(/resources/images/flags/gb.png);
}

#fr { 
    background-image: url(/resources/images/flags/fr.png);
}

这里的问题是：

f：selectItems（以及f：selectItem）似乎不支持样式属性。
我可以使用javascript将样式应用于标签，但我需要为标签设置ID，其中f：selectItem（似乎）也不允许。

我认为另一件事是使用上面链接中提到的JQuery控件，但这是另一个问题：如何将所选选项的值设置为JSF bean。换句话说，我可以通过JQuery或Javascript和纯HTML设置＃{localeBean.selectedLocale}吗？

我发现PrimeFaces有一个selectOneMenu控件，允许添加图标http://www.primefaces.org/showcase/ui/selectOneMenu.jsf（名为'Content with Filter'的图标）但是我很害怕我们现在无法承担从RichFaces转到PrimeFaces的费用。

感谢任何帮助。

Answer 1

我自己找到了解决方案。我想我可以使用jQuery将hids或类添加到html标签，所以我已经完成了，我添加了以下脚本：

<script type="text/javascript">
    $(document).ready(function() {
       $('option').each(function(){
          $(this).addClass(this.value);
       });
    });
</script>

和css：

    option {
        background-repeat: no-repeat;
        background-position: right;
    }

    .en {
        background-image: url(/resources/images/flags/gb.png);
    }

    .fr {
        background-image: url(/resources/images/flags/fr.png);
    }
    ...

我使用了类，因为我的应用程序中有两个带标记的菜单，但这也适用于ID。

该脚本将该类添加到JSF生成的标记中，因此将值重新发送回managedBean不再存在问题。

谢谢大家。

带有标志图标的JSF RichFaces区域设置下拉列表

1 个答案: