Question

我有两个<h:commandLink>并且在每个<h:commandLink>我放置了一个<p:graphicImage>我想要更改onClick事件上图像的宽度和高度。默认情况下，usFlag保持活动状态（意味着比其他更大）。代码片段如下...

<p:commandLink id="usLink" action="#{localeController.switchLocale('en')}">
    <p:graphicImage id="usFlag" value="/resources/images/us-flag.gif" styleClass="activeFlag"/>
</p:commandLink>
<p:commandLink id="frLink" action="#{localeController.switchLocale('fr')}">
    <p:graphicImage id="frFlag" value="/resources/images/fr-flag.gif" styleClass="inActiveFlag"/>
</p:commandLink>

我希望点击链接后会设置该图像的高度和宽度。我想用js完成它。这怎么可能？谁能帮我？感谢

Answer 1

您需要根据区域设置为图像动态分配styleClass。在您的支持bean中创建一个方法，例如

public String getStyleClassForImageLocale(String locale)
{
// if locale = the currently selected locale
// then return "activeFlag"
// else return "inactiveFlag"
}

然后在你的xhtml中：

<p:commandLink id="usLink" action="#{localeController.switchLocale('en')}">
    <p:graphicImage id="usFlag" value="/resources/images/us-flag.gif" styleClass="#{localeController.getStyleClassForImageLocale('en')"/>
</p:commandLink>
<p:commandLink id="frLink" action="#{localeController.switchLocale('fr')}">
    <p:graphicImage id="frFlag" value="/resources/images/fr-flag.gif" styleClass="#{localeController.getStyleClassForImageLocale('fr')"/>
</p:commandLink>

然后在你的css文件中设置样式类的宽度和高度.inActiveFlag和.activeFlag

onClick on commandLink设置随该链接附加的图像的css

1 个答案: