traduction de code JQuery en WiQuery
Bonjour,
je débute avec Wicket ainsi qu'avec JQuery et WiQuery (combo gagnant :aie:)
J'ai trouvé le tuto suivant qui montre comment faire une FAQ dynamique avec l'aide de JQuery.
Comme ça correspond à mes besoins, et que je travaille avec Wicket, j'ai tenté de le traduire en utilisant WiQuery.
Voici le code HTML de la FAQ :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <div id="content" class="column-right">
<!-- CONTENT -->
<wicket:extend>
<h2>Foire Aux Questions</h2>
<h3>Question 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
auctor tempor mi. Maecenas vitae diam commodo metus tincidunt
porttitor. Morbi tempus metus sed purus vehicula ut luctus purus
eleifend.</p>
<h3>Question 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
auctor tempor mi. Maecenas vitae diam commodo metus tincidunt
porttitor. Morbi tempus metus sed purus vehicula ut luctus purus
eleifend.</p>
<h3>Question 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
auctor tempor mi. Maecenas vitae diam commodo metus tincidunt
porttitor. Morbi tempus metus sed purus vehicula ut luctus purus
eleifend.</p>
<h3>Question 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
auctor tempor mi. Maecenas vitae diam commodo metus tincidunt
porttitor. Morbi tempus metus sed purus vehicula ut luctus purus
eleifend.</p>
</wicket:extend>
</div> |
Le code JQuery à traduire :
Code:
1 2 3 4 5 6 7 8 9 10 11 12
| <script type="text/javascript">
// On lance la boucle sur tous les H3
$('h3').each(function() {
// On masque le paragraphe qui suit
$(this).next('p').hide();
// A chaque clic, on bascule l'état de l'élément P suivant
$(this).click(function() {
$(this).next('p').toggle();
});
});
</script> |
et ma solution :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| public class FaqPage extends BasePageVisiteur {
@SuppressWarnings("serial")
public FaqPage(final PageParameters pp)
{
super(pp);
add(new WiQueryAbstractBehavior() {
@Override
public JsStatement statement() {
return new JsStatement().document().chain("ready", "function(){ " +
"$('h3').each(function(){ " +
"$(this).next('p').hide();" +
"$(this).click(function(){" +
"$(this).next('p').toggle();" +
"});" +
"}); }");
}
});
}
} |
Ce code marche bien, mais c'est très moche et sans doute pas la solution idéale.
Je viens à la pêche aux idées et conseils pour améliorer tout ça...
merci d'avance :ccool: