2

我浏览了很长时间寻找解决方案，但没有找到合适的答案。我正在使用 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);
}

这里的问题是：

  1. f:selectItems（以及 f:selectItem）似乎不支持样式属性。
  2. 我可以使用 javascript 将样式应用于标签，但我需要有标签的 ID，而 f:selectItem （似乎）也不允许这样做。

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

我发现 PrimeFaces 有一个 selectOneMenu 控件，它允许添加图标http://www.primefaces.org/showcase/ui/selectOneMenu.jsf（名为“带有过滤器的内容”的那个）但我害怕我们负担不起目前从 RichFaces 切换到 PrimeFaces。

任何帮助表示赞赏。

4

1 回答 1

0

我自己找到了解决方案。我认为我可以使用 jQuery 将 id 或类添加到 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 不再存在问题。

谢谢大家。

于 2013-04-07T13:23:01.517 回答