플래그 아이콘이있는 JSF RichFaces 로케일 드롭 다운 목록

Question

오랫동안 해결책을 찾기 위해 탐색 중이었지만 적절한 대답을 찾지 못했습니다. RichFaces 라이브러리를 사용하여 JSF 웹 애플리케이션을 개발 중입니다. 응용 프로그램은 다른 로케일을 지원하며 사용자는 드롭 다운 목록에서 선택하여 변경할 수 있습니다. 드롭 다운 목록의 항목에 로캘 이름의 플래그 아이콘을 지정합니다.

불행히도 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. 자바 스크립트를 사용하여 태그에 스타일을 적용 할 수 있지만 selectItem (보이는 것)이 허용하지 않는 태그에 ID가 있어야합니다.

위의 링크에서 언급 한 JQuery 컨트롤을 사용하는 것이 다른 방법이지만, JSF 빈에 대해 선택한 옵션의 값을 설정하는 방법은 다음과 같습니다. 즉, # {localeBean.selectedLocale}을 JQuery 또는 Javascript와 일반 HTML을 통해 설정할 수 있습니까?

나는 PrimeFaces이 아이콘에게 ('필터와 내용'라는 이름의 하나) http://www.primefaces.org/showcase/ui/selectOneMenu.jsf를 추가 허용하는 selectOneMenu 컨트롤을 가지고 있지만 나는 우리가 지금 PrimeFaces에 RichFaces 전환 할 여유가 없습니다 affraid 해요 것으로 나타났습니다.

도움을 주시면 감사하겠습니다.

Answer 1

직접 해결책을 찾았습니다.

<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); 
    } 
    ... 

내가 jQuery로 태그를 HTML로 ID 또는 클래스를 추가 할 수있어, 내가 무슨 짓을했는지, 나는 다음과 같은 스크립트를 추가 한 생각 내 응용 프로그램에서 플래그가있는 두 개의 메뉴가 있기 때문에 나는 클래스를 사용하지만, 이것은 ID뿐만 아니라 작동합니다.

스크립트는 클래스를 JSF 생성 태그에 추가하므로 더 이상 managedBean으로 값을 보내지 않는 문제가 없습니다.

모두에게 감사드립니다.