I was searching for the solution for a long time, but did not succeed.
I'm developing a JSF web appication using RichFaces library. Application supports different locales, and user is able to change them by selecting from dropdown list.
My goal is to have the items in dropdown list to contain flag icons along witn the locale name.
Unfortunately, I could not find the way to do it with JSF/RichFaces.
The xthml code for the dropdown list is:
<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>
Flag icons are simply done with plain HTML and JQuery, like I've found here: http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/
To put the icon in the dropdown list item, I have to apply the css for each element in list, like:
#en { background-image: url(/resources/images/flags/gb.png); }
#fr { background-image: url(/resources/images/flags/fr.png); }
The problems here are:
- f:selectItems (as well as f:selectItem) does not seem to support style property (does it?).
- I could apply styles to <output /> tags using javascript, but I need to have IDs for tags, which f:selectItem does not seem to allow as well.
Please, advice what can I do to accomplist the goal.
Any help isappreciated.
