Bonjour,
je débute avec Wicket ainsi qu'avec JQuery et WiQuery (combo gagnant )
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 :
Le code JQuery à traduire :
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
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>
et ma solution :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Ce code marche bien, mais c'est très moche et sans doute pas la solution idéale.
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
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();" + "});" + "}); }"); } }); } }
Je viens à la pêche aux idées et conseils pour améliorer tout ça...
merci d'avance
Partager