web-dev-qa-db-fra.com

Comment créer un bouton d'image dans JSF

Je veux avoir un composant qui ressemble à un bouton, mais au lieu de texte, il devrait contenir une image. Comme le bouton standard n’offrait pas cette fonctionnalité, j’ai essayé d’utiliser un <h:commandLink>:

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>

Ça ne marche pas. Le <h:commandLink> est traduit en une balise <a> et le <p:panel> en un <div>. Les balises <a>- ne peuvent pas contenir de balises <div>-, de sorte que la balise <div>- est automatiquement placée à l'extérieur de la balise <a>-. Le résultat est que seule l’image est cliquable, et non le panneau environnant dont le style ressemble à un bouton. Existe-t-il un moyen de faire en sorte que le panneau environnant fasse partie du lien ou de placer une image à l'intérieur d'un bouton?

Mon projet utilise JSF et la bibliothèque Primefaces:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://Java.Sun.com/jsf/html"
xmlns:composite="http://Java.Sun.com/jsf/composite"
xmlns:f="http://Java.Sun.com/jsf/core"
xmlns:ui="http://Java.Sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
jsfbuttonprimefaces
20
bspoel

Vous pouvez ajouter une image à un commandButton :

Utiliser l'attribut image

<h:commandButton action="#{some_action}" image="button.gif" />

URL absolue ou relative de l'image à afficher pour ce bouton. Si spécifié, cet élément "input" sera être de type "image". Sinon, ça va être du type spécifié par le "type" propriété avec une étiquette spécifiée par le propriété "valeur".

Utiliser CSS

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}
29
Mark

Vous pouvez simplement déplacer la div à l'extérieur, par exemple.

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

Et coiffez la div de cette façon. Il suffit de faire en sorte que l’ancre (une balise) s’affiche sous forme de bloc et elle remplisse tout le div pour que tout soit cliquable. Par exemple, dans votre CSS, allez:

.clickAll{
  display:block;
}
8
planetjones

Si vous pouvez utiliser une icône de PrimeFaces/JSF, il existe une solution simple et efficace.

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

Il peut être utile d’éviter le code JavaScript dans JSF.

4
Prateek Singh

Si l'image ne rentre pas, ajoutez des propriétés à une classe сss:

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}
0
0x5a4d