Discussion :

[DaXou45]

Salut,

j'ai un problème. Je n'arrive pas à appliquer un style (composé essentiellement d'une image de fond pour chacun de mes 3 boutons radio)

Voici le code que j'utilise:

- le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.onglets_livraison #express {
	background-image: url(images/fond_livraison_rapide.gif);
	font-size: 12px;
 
}
.onglets_livraison #standard {
	background-image: url(images/fond_livraison_classique.gif);
	font-size: 12px;
 
}
.onglets_livraison #cadeau {
	background-image: url(images/fond_livraison_Kdo.gif);
	font-size: 12px;
}

- le code de ma jsp:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h:panelGrid width="100%" columns="1" id="tableChoixModLi">
<f:facet name="header">
<h:outputText value="#{mo.LIB_CHOI_TYPE}" />
</f:facet>
<h:selectOneRadio id="choixModeLiv" value="#{cml.idChoix}"
rendered="#{!cml.domicileDOM}"
onclick="pulldownChanged();" immediate="true">
<f:selectItems value="#{cml.listChoixModeLiv}" />
<f:converter converterId="trimConverter" />
</h:selectOneRadio>
<h:selectOneRadio id="choixModeLivDom" value="#{cml.idChoix}"
rendered="#{cml.domicileDOM}"
onclick="pulldownChanged();" immediate="true">
<f:selectItem itemValue="4" itemLabel="#{mo.LIB_LIV_EXPRS_DOM}" />
<f:selectItem itemValue="5" itemLabel="#{mo.LIB_LIV_CLASS_DOM}" />
<f:converter converterId="trimConverter" />
</h:selectOneRadio>
<h:commandButton id="majButton" style="display:none;"
actionListener="#{cml.updatePage}" />
</h:panelGrid>

Donc en gros, la dedans: <f:selectItems value="#{cml.listChoixModeLiv}" />
il y a exactement 3 selectItem dans la liste et je veux mettre un style par selectItem. On m'a dit qu'on pouvait contourner le probleme en faisant une tite fonction js onload() pour charger le style après avoir récup l'id de chaque item mais je ne suis pas doué en js.

Donc si quelqu'un pouvait m'aider, svp.

Ahh les développeurs juniors...

[tchize_]

Salut,

sur les navigateurs qui le supportent, tu peux appliquer un style différentié en fonction de la valeur d'un attribut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style>
.onglet_livraison[value='express']{
	background-image: url(images/fond_livraison_rapide.gif);
	font-size: 12px;
}
</style>

Voir les selecteurs css 2


et dans ton bean:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
public SelectItem[] getLivraisonsTypes{
....
    result[0] = new SelectItem("express","Livraison Express 48 heures (voir conditions)");
....
    return result;
}

et finalement la partie JSF

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<h:selectOneRadio id="choixModeLiv" styleClass="onglet_livraison"
...

Ce sera plus propre est plus facile que de passer par du javascript. Et ceux qu'on pas css2? Ben ils ont toujours le texte

[DaXou45]

Je viens de tester ton truc et ca n'a pas l'air de fonctionner. Certainement que je m'y suis mal pris.

Mon jsp:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<h:selectOneRadio id="choixModeLiv" styleClass="onglet_livraison"
 value="#{cml.idChoix}"
	rendered="#{!cml.domicileDOM}"
	onclick="pulldownChanged();" immediate="true">
	<f:selectItems value="#{cml.listChoixModeLiv}" />
	<f:converter converterId="trimConverter" />
</h:selectOneRadio>

Mon css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.onglets_livraison[value='1'] {
	background-image: url(images/fond_livraison_rapide.gif);
	font-size: 12px;
 
}
.onglets_livraison[value='2'] {
	background-image: url(images/fond_livraison_classique.gif);
	font-size: 12px;
 
}
.onglets_livraison[value='3'] {
	background-image: url(images/fond_livraison_Kdo.gif);
	font-size: 12px;
}

l'extrait de mon bean où j'alimente la ma liste de selectItem:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	listChoixModeLiv.add(new SelectItem("1", UtilMessage.getString(	UtilConstants.CHOIX_MODE_LIV_BUNDLE,"LIB_LIV_EXPRS", null)));
 
	listChoixModeLiv.add(new SelectItem("2", UtilMessage.getString(
	UtilConstants.CHOIX_MODE_LIV_BUNDLE, "LIB_LIV_CLASS", null)));
 
	listChoixModeLiv.add(new SelectItem("3", UtilMessage.getString(
	UtilConstants.CHOIX_MODE_LIV_BUNDLE, "LIB_LIV_COMM", null)));

Donc tout marche sauf el style.

Voici un moceau du source html généré, si ca peut aider:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label><input name="selectionChoixModForm:choixModeLiv" checked="checked" value="1" onclick="pulldownChanged();" class="onglet_livraison" type="radio">&nbsp;Livraison Express</label></td>		<td><label><input name="selectionChoixModForm:choixModeLiv" value="2" onclick="pulldownChanged();" class="onglet_livraison" type="radio">&nbsp;Livraison Classique</label></td>		<td><label><input name="selectionChoixModForm:choixModeLiv" value="3" onclick="pulldownChanged();" class="onglet_livraison" type="radio">&nbsp;Commande Cadeau</label>