帶有標誌圖標的JSF RichFaces語言環境下拉列表

我在瀏覽以找到很長時間的解決方案，但我沒有找到合適的答案。我正在開發一個使用RichFaces庫的JSF Web應用程序。應用程序支持不同的區域設置，用戶可以通過從下拉列表中進行選擇來更改它們。我希望下拉列表中的項目沿區域名稱有一個標誌圖標。帶有標誌圖標的JSF RichFaces語言環境下拉列表

不幸的是，我找不到用JSF做到這一點的方法。

的下拉列表中的代碼使用xhtml是：

<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）似乎不支持style屬性。
我可以使用JavaScript將樣式應用於標籤，但我需要標籤的ID，而f：selectItem（似乎）也不允許。

我想要的另一件事是使用上面鏈接中提到的JQuery控件，但這裏是另一個問題：如何將所選選項的值設置爲JSF bean。換句話說，我可以通過JQuery或Javascript和純HTML設置＃{localeBean.selectedLocale}嗎？

我發現PrimeFaces有selectOneMenu用於控制，其允許添加圖標http://www.primefaces.org/showcase/ui/selectOneMenu.jsf（在一個名爲「內容與過濾器」）但我affraid，我們不能從RichFaces的此刻切換到PrimeFaces。

任何幫助表示讚賞。

來源

2013-04-05 mp_loki

我建議你也可以在Rich Faces論壇上提問你的問題：https://community.jboss.org/en/richfaces你想要做的事很簡單，但可以肯定的是開發者需要一隻手。當你得到它時，粘貼你的答案。 – 2013-04-05 14:44:53

您使用的是JSF 1.2 + RichFaces 3.x或JSF 2.x + RichFaces 4.x嗎？ – 2013-04-06 12:52:34

Luiggi Mendoza，我正在使用JSF 2.x + RichFaces 4.x – 2013-04-06 16:05:18

我自己找到了解決方案。我想，我能夠加入ID或班級爲html與jQuery的標籤，所以我做了什麼，我已經添加了下面的腳本：

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

我使用了類，因爲我的應用程序中有兩個帶有標誌的菜單，但這也適用於ids。

該腳本將該類添加到JSF生成的標記中，因此將值發送回managedBean不再有問題。

謝謝大家。

來源

2013-04-07 13:23:01

實際上，select的背景圖像僅在Firefox中受支持。事實上，我們必須使用div來模擬選擇行爲並添加javascript事件處理 – 2014-10-21 17:57:44

帶有標誌圖標的JSF RichFaces語言環境下拉列表

回答

相關問題