Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Catégories | | Implémentation Javascript et html Le script se base sur jquery et sur une feuille de style spécifique utilisant deux images (+ et -). Il faut tout d'abord inclure ces éléments et y faire référence dans la page mettant en place le treeview : - Code:
-
<link rel="stylesheet" type="text/css" href="treeview.css" media="screen" /> <script type="text/javascript" src="jquery.js"></script>
Il faut ensuite appliquer le code javascript suivant dans la partie qui s'occupera de gérer le comportement des éléments du treeview : - Code:
-
<script type="text/javascript"> $(function() { $('div.tree div:has(div)').addClass('parent'); $$('div.tree div').click(function() { var o = $(this); o.children('div').toggle(); o.filter('.parent').toggleClass('expanded'); false; $}); }); </script>
Finalement il ne reste plus qu'à mettre en place le code html relatif au treeview, la div parent devant avoir comme classe : "tree" - Code:
-
<div class='tree' style='padding:10px; border:solid 1px #dedede;'> <div>Catégorie 1 <div>Sous catégorie 1 <div>Texte élément 1</div> <div>Texte élément 2</div> <div>Texte élément 3</div> </div> <div>Sous catégorie 2</div> <div>Sous catégorie 3</div> </div> <div>Catégorie 2 <div>Sous catégorie 1</div> <div>Sous catégorie 2 <div>Texte élément 1</div> <div>Texte élément 2</div> <div>Texte élément 3</div> </div> <div>Sous catégorie 3</div> </div> </div>
Excemple:[Vous devez être inscrit et connecté pour voir cette image] |
| |