且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在< option>中显示图像由< h:selectOneMenu>呈现的元素标签

更新时间:2022-11-30 12:11:03

不可能将图像嵌入JSF的<h:selectOneMenu>/<f:selectItem>/<f:selectItems>中,因为没有为此目的而设计的属性.此外,几乎没有跨浏览器兼容的解决方案.

It is impossible to embed images within JSF's <h:selectOneMenu>/<f:selectItem>/<f:selectItems>, as there are no attributes designed for that purpose. Moreover, there is hardly a cross-browser compatible solution for that.

尽管您可以为此使用组件库,例如PrimeFaces.它具有<p:selectOneMenu>组件,该组件基本上将<select>/<option>用HTML/jQuery魔术包起来,以便在屏幕上显示替代".用法示例可在展示示例中找到.背诵它:

Though you could use a component library for that, like PrimeFaces. It has <p:selectOneMenu> component that basically wraps <select>/<option> with some HTML/jQuery magic, so that a 'substitute' is displayed onscreen. Example usage can be found in a showcase example. To recite it:

<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer2}" converter="player" var="p">  
    <f:selectItem itemLabel="Select One" itemValue="" />  
    <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>  

    <p:column>  
        <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>  
    </p:column>  

    <p:column>  
        #{p.name} - #{p.number}  
    </p:column>  
</p:selectOneMenu>  

当然,您可以以其他方式加载图像.

Of course, you can load the images in a different manner.