web-dev-qa-db-de.com

Befehlsschaltfläche nur mit Bild anzeigen

Ich versuche, eine Schaltfläche mit einem Bild nur auf meiner Seite anzuzeigen, aber alles, was ich sehe, ist die Schaltfläche mit ^. Im Folgenden finden Sie den Code für meine Schaltfläche:

<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>

Das Bild ist im Bilderordner vorhanden. Die Schaltfläche wird auf der Seite wie folgt dargestellt:

<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>

Vielen Dank!!!

jsfjsf-2primefaces
16
KunalC

Das image-Attribut muss auf einen CSSKlassennamen verweisen, nicht auf eine einfache CSS-Eigenschaft. Also sollte dies tun:

<p:commandButton image="someCssClassName" />

mit folgendem in Ihrem CSS:

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

Bitte beachten Sie, dass der Hauptschreibfehler im Eigenschaftennamen behoben und auch der führende Schrägstrich aus der Bild-URL entfernt wurde. Andernfalls würde er relativ zum Domänenstamm der Site aufgelöst werden. Das Obige erwartet, dass title_logo.jpg sich in einem /image-Ordner befindet, der sich wiederum in dem Ordner befindet, in dem sich die CSS-Datei befindet.

Dieser ist jedoch weniger unbeholfen, denke ich:

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

Ich schlage vor, "P: coomandLink" und "P: graphicImage" gleichzeitig zu verwenden. Ich habe einen Ordner unter "webapps" erstellt und meine JPG-Datei unter diesen Ordner gelegt. Viel Glück.

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

Setzen Sie dies auf Ihren CSS-Stil:

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

Jetzt können Sie das Icon "Dolar-Icon" verwenden, das Sie in Ihrer CSS definiert haben.

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