0

私は2つ持って<h:commandLink>おり、それぞれにイベントの幅と高さを変更したい画像を<h:commandLink>配置しました。デフォルトでは、アクティブのままです (他よりも大きいことを意味します)。コードスニペットを以下に示します...<p:graphicImage>onClickusFlag

<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で実現したい。それはどのように可能ですか？誰でも私を助けることができますか？ありがとう

4

1 に答える 1

0

ロケールに基づいて、画像の 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 の幅と高さを設定するだけです。

于 2013-06-10T13:37:14.433 に答える