Brauchen Sie Hilfe, um die Anzeige ein-Symbol in Befehlsschaltfläche
Nur ein Grundbedürfnis, sondern kann es nicht funktionieren.
Ich würde gerne eine primefaces-Taste zur Anzeige der " mein Bild, ohne text.
Aber was ich bekomme ist eine Schaltfläche, die enthält nur eine ^
Charakter und NICHT das Bild anzeigen, das hat nur eine Größe von 16x16.
So, das ist der primefaces-Taste :
<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
<p:dataExporter type="csv" target="gridRPBDetails"
fileName="#{tInputBean.exportFilename}" />
</p:commandButton>
Dies ist die css-Datei :
.ui-icon-csv {
background-image: url(images/csv_small.png);
}
- Und dies ist der generierte html-Code für den button :
<button type="submit" onclick=";"
name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span>
</button>
Beweisen sollte, dass das Bild zugänglich ist, versuche ich diese URL, und in der Tat zeigt es das Bild :
http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png
Im mit tomcat 7 und dies sind meine Abhängigkeiten :
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>2.2.1</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0.4-b09</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.0.4-b09</version>
<scope>compile</scope>
</dependency>
Irgendwelche Ideen, was falsch gelaufen ist ?
Danke !
- Sind Sie sicher, dass Ihr css findet das Bild (in der korrekten relativen Pfad)? Versuchen Sie es mit Chrome/Firefox Entwickler-Werkzeuge für alle 404-Fehler, wenn Sie die Seite anfordern mit der Schaltfläche.
- Handy: Hallo, vielen Dank für Sie Antwort. Ja, wie gesagt in der original-Beitrag, ich kann das Bild mit dieser URL. Und auch vergaß ich zu erwähnen, dass ich managed, um das Bild anzuzeigen, auch mit firebug. Aber ich habe eine Lösung gefunden, nach einigen Optimierungen, um css. Bitte siehe die Antwort unten, wenn Sie interessiert sind. Danke!!!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nach einigen Recherchen mit firebug habe ich herausgefunden, dass die Täter aus der CSS-Sachen, die ich definiert.
So das sind die Veränderungen die ich gemacht habe um diese Arbeit zu machen.
Den JSF-Taste :
CSS :
Und hier ist der generierte html-Code :
Danke !
schreiben
ui-widget
vor der Ikone Klasse nameden
.ui-state-default
wird nicht sichtbar machen, die in anderen Komponenten wie<p:menuitem/>
und<p:menuButton/>
Primefaces bieten die
graphicImage
wie gezeigt, in Ihrer Schaufenster-labs (broken link):Kann es sinnvoll sein, in irgendwie an jemanden.
* Für PrimeFaces 5.2, Folgen Sie zu diesem showcase-labs-link.
Beachten Sie, dass in diesem Fall der obige code würde nicht funktionieren.
Wenn
commandButton
verwendet wird, ist es wichtig, dass die png Datei mit einer Größe von 16 x 16, weil ein größeres Bild möglicherweise nicht richtig angezeigt oder gar nicht angezeigt.