如何在 p:selectOneMenu 的所选项目上显示图像
How to show image on selected item of p:selectOneMenu
我正在尝试实施高级 selectOneMenu
(PrimeFaces) 以根据其旗帜图标选择语言环境。图标显示在列表中,但不显示所选项目(showcase 上也是如此)。我该怎么做?
<p:selectOneMenu id="mySOMId" value="#{localeBean.locale}" var="mySOMVar" converter="#{localeConverter}" >
<f:selectItems
value="#{myBean.locales}"
var="localeSIVar"
itemLabel="#{localeSIVar.language}"
itemValue="#{localeSIVar}" />
<p:column style="text-align: center;" >
<h:graphicImage library="default" height="20" name="img/#{mySOMVar.language}.svg" />
</p:column>
</p:selectOneMenu>
我可以看到 f:selectItems
有一个 itemLabelEscaped
属性,我可以用它在 itemLabel
中输出 <img>
标签,但我不知道我要做什么会穿上它的 src
.
谢谢
您可以使用 #{resource['library:name']}
语法为资源打印 URL,如 How to reference CSS / JS / image resource in Facelets template?
中所示
所以,鉴于您实际上想使用
<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />
在itemLabel
中,并且<f:selectItems>
的itemLabelEscaped
属性设置为true
,则可以使用以下语法作为[=13=的值]:
itemLabel="<img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' />"
备注:
- 你只能在那里使用纯 HTML,不能使用 JSF 组件。
- 为了提高可读性,最好在普通 HTML 中使用单引号作为属性值分隔符,后者又声明为用双引号括起来的属性。您当然也可以使用
"
代替这些单引号。
- 如上所示,单引号在 EL 表达式中继续正常工作,无需重新转义。您甚至可以在 EL 表达式中使用双引号,但代码编辑器中的语法突出显示在这里很容易失败,可能会造成不必要的混淆。
+=
运算符是自 EL 3.0 以来新增的;如果您仍在使用较旧的 EL 版本,请前往 How to concatenate a String in EL? 了解在 EL 中连接字符串的替代方法(然后将其作为变量重新使用)。
我正在尝试实施高级 selectOneMenu
(PrimeFaces) 以根据其旗帜图标选择语言环境。图标显示在列表中,但不显示所选项目(showcase 上也是如此)。我该怎么做?
<p:selectOneMenu id="mySOMId" value="#{localeBean.locale}" var="mySOMVar" converter="#{localeConverter}" >
<f:selectItems
value="#{myBean.locales}"
var="localeSIVar"
itemLabel="#{localeSIVar.language}"
itemValue="#{localeSIVar}" />
<p:column style="text-align: center;" >
<h:graphicImage library="default" height="20" name="img/#{mySOMVar.language}.svg" />
</p:column>
</p:selectOneMenu>
我可以看到 f:selectItems
有一个 itemLabelEscaped
属性,我可以用它在 itemLabel
中输出 <img>
标签,但我不知道我要做什么会穿上它的 src
.
谢谢
您可以使用 #{resource['library:name']}
语法为资源打印 URL,如 How to reference CSS / JS / image resource in Facelets template?
所以,鉴于您实际上想使用
<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />
在itemLabel
中,并且<f:selectItems>
的itemLabelEscaped
属性设置为true
,则可以使用以下语法作为[=13=的值]:
itemLabel="<img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' />"
备注:
- 你只能在那里使用纯 HTML,不能使用 JSF 组件。
- 为了提高可读性,最好在普通 HTML 中使用单引号作为属性值分隔符,后者又声明为用双引号括起来的属性。您当然也可以使用
"
代替这些单引号。 - 如上所示,单引号在 EL 表达式中继续正常工作,无需重新转义。您甚至可以在 EL 表达式中使用双引号,但代码编辑器中的语法突出显示在这里很容易失败,可能会造成不必要的混淆。
+=
运算符是自 EL 3.0 以来新增的;如果您仍在使用较旧的 EL 版本,请前往 How to concatenate a String in EL? 了解在 EL 中连接字符串的替代方法(然后将其作为变量重新使用)。