web-dev-qa-db-ja.com

画像のみでコマンドボタンを表示する

ページにのみ画像付きのボタンを表示しようとしていますが、表示されるのは^付きのボタンだけです。以下は私のボタンのコードです：

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">  
    <ui:include src="lineSearch.xhtml"/>
</p:dialog>

画像は画像フォルダに存在します。ボタンは、ページ内で次のようにレンダリングされます。

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
    <span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}});
</script>

ありがとう!!!

jsfjsf-2primefaces
16
KunalC

image属性は、プレーンCSSプロパティではなく、CSS クラス名を参照する必要があります。だから、これはする必要があります：

<p:commandButton image="someCssClassName" />

あなたのCSSに次のように：

.someCssClassName {
    background-image: url(images/title_logo.jpg)
}

プロパティ名の主要な誤字を修正し、画像URLから先頭のスラッシュも削除したことに注意してください。そうしないと、サイトのドメインルートに関連して解決されます。上記では、title_logo.jpgが/imageフォルダー内にあると想定しています。このフォルダーは、CSSファイルが存在するフォルダー内にあります。

ただし、これは不器用ではありません。

<p:commandLink action="#{bean.submit}">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>
38
BalusC

「P：coomandLink」と「P：graphicImage」を同時に使用することをお勧めします。 webappsの下にフォルダーを作成し、このフォルダーの下にjpgファイルを配置しました。このコードは私にとってはうまく機能します。幸運を。

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>
1
Reza

これをCSSスタイルに追加します。

    .dolar-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

これで、cssで定義したアイコン「dolar-icon」を使用できます。

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>
0
Raul Serra