Forum Crea illusion Fantasy
Catégories Bannie10

Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum Crea illusion Fantasy

#Forum d'entraide, une inscription pour nous rejoindre. Les débutants sont les bienvenu aussi :)


 
Partagez

Catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83179
Fondatrice
Ptite_Perle
MessageSujet: Catégories Catégories EmptyJeu 31 Mai 2018 - 12:09
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 ce lien]

[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas

Catégories

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Problème avec catégories. (RESOLU)
» Rétracter les catégories
» (NEVA) Une commande de catégories toute simple :3
» Mettre une image en fond dans toutes les catégories + PA
» Soucis sur la barre de navigation et option sur cathégories

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy :: Astuces codages pour forumactif :: Astuces et codages forumactif-