Retour à Tutoriels Javascript

TUTORIAL: Expand / effondrement des blocs et les arbres de navigation

  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 24th, 2008, 9:37 pm

Introduction


Youve vu Expand / Collapse blocs un peu partout sur Internet! Vous avez toujours voulu savoir comment faire la vôtre? Youll soit surpris de voir combien il est simple - juste quelques lignes de JavaScript vous permet de basculer un bloc de contenu sur votre page web.

Le reste de ce tutoriel suppose une connaissance de base de HTML et JavaScript.

Un bloc bascule simple


Attachments:
toggle.png

Simple expand/collapse block


Commençons par un simple bloc de texte (on pourrait aussi contenir des images et tout autre contenu) que nous souhaitons faire un levier à bascule en mesure de:
Code: [ Select ]
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.
</div>
  1. <div id="content">
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.
  3. </div>

Ensuite, nous ajoutons un lien qui permet de basculer le bloc quand on clique dessus:
Code: [ Select ]
<a href="#" onclick="toggle('content')">Toggle</a>

Tout ce qui reste est la réelle toggle fonction. Le toggle fonction elle-même est assez simple: il faut de l'ID de l'élément à bascule et utilise les CSS afficher la propriété pour afficher / cacher. Par défaut, la propriété d'affichage est vide. (sauf si spécifié autrement dans les CSS) pour masquer un élément, vous venez de définir afficher à «none». Le code va comme ceci:
Code: [ Select ]
<script type="text/javascript">
 
function toggle(id) {
  var e = document.getElementById(id);
 
  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}
 
</script>
  1. <script type="text/javascript">
  2.  
  3. function toggle(id) {
  4.   var e = document.getElementById(id);
  5.  
  6.   if (e.style.display == '')
  7.     e.style.display = 'none';
  8.   else
  9.     e.style.display = '';
  10. }
  11.  
  12. </script>

Placez le dessus de 3 fragments de code ensemble et youve a obtenu un travail Expand / bloc de l'effondrement.

Dans l'exemple ci-dessus, le bloc est d'abord visible. Pour avoir le bloc caché par défaut, modifiez simplement la première ligne comme suit:
Code: [ Select ]
<div id="content" style="display:none">


Un petit ajout


Avec l'ajout de quelques lignes de plus, vous pouvez alterner entre le texte du lien entre "Expand" et "Collapse" lorsque l'utilisateur clique dessus. Pour ce faire, on passe dans un autre paramètre à toggle : Une référence au lien qui active l'effet de bascule.
Code: [ Select ]
<a href="#" onclick="toggle2('content', this)">Collapse</a>

Code: [ Select ]
<script type="text/javascript">
 
function toggle2(id, link) {
  var e = document.getElementById(id);
 
  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = 'Expand';
  } else {
    e.style.display = '';
    link.innerHTML = 'Collapse';
  }
}
 
</script>
  1. <script type="text/javascript">
  2.  
  3. function toggle2(id, link) {
  4.   var e = document.getElementById(id);
  5.  
  6.   if (e.style.display == '') {
  7.     e.style.display = 'none';
  8.     link.innerHTML = 'Expand';
  9.   } else {
  10.     e.style.display = '';
  11.     link.innerHTML = 'Collapse';
  12.   }
  13. }
  14.  
  15. </script>


Arbre de construction des structures


Attachments:
toggle-tree.png

Nested expand/collapse blocks in tree format


Par emboîtement un bloc dans une autre, vous pouvez créer des structures en forme d'arbre où chaque noeud individuelles peuvent être étendues et effondrées. Le code de cette utilise les mêmes toggle fonction définie ci-dessus, sauf que plusieurs blocs sont imbriqués entre eux:
Code: [ Select ]
<ul>
  <li>
    <a href="#" onclick="toggle('node1')">Item 1</a>
    <ul id="node1" style="display:none">
      <li>Sub-item 1</li>
      <li>
        <a href="#" onclick="toggle('node2')">Sub-item 2</a>
        <ul id="node2" style="display:none">
          <li>Sub-sub-item 1</li>
          <li>Sub-sub-item 2</li>
        </ul>
      </li>
      <li>Sub-item 3</li>
    </ul>
  </li>
  <li>
    <a href="#" onclick="toggle('node3')">Item 2</a>
    <ul id="node3" style="display:none">
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
  1. <ul>
  2.   <li>
  3.     <a href="#" onclick="toggle('node1')">Item 1</a>
  4.     <ul id="node1" style="display:none">
  5.       <li>Sub-item 1</li>
  6.       <li>
  7.         <a href="#" onclick="toggle('node2')">Sub-item 2</a>
  8.         <ul id="node2" style="display:none">
  9.           <li>Sub-sub-item 1</li>
  10.           <li>Sub-sub-item 2</li>
  11.         </ul>
  12.       </li>
  13.       <li>Sub-item 3</li>
  14.     </ul>
  15.   </li>
  16.   <li>
  17.     <a href="#" onclick="toggle('node3')">Item 2</a>
  18.     <ul id="node3" style="display:none">
  19.       <li>Sub-item 1</li>
  20.       <li>Sub-item 2</li>
  21.     </ul>
  22.   </li>
  23.   <li>Item 3</li>
  24. </ul>


Conclusion


Well, thats about it! Ses aussi simple que de créer un expand / bloc de l'effondrement. Et vous pouvez utiliser comme bon nombre de ces blocs que vous voulez sur une seule page.

Vous pouvez télécharger l'exemple de code pour ce tutoriel ci-dessous. La pièce jointe contient un seul fichier HTML qui montre l'expansion / bloc de l'effondrement et l'arbre de navigation dans l'action.
Attachments:
toggle.zip

(723 Octets) Téléchargé 6606 fois

Tutorial sample code

No Strings Attached: A JavaScript graphics demo.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 24th, 2008, 9:37 pm

  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juin 26th, 2008, 9:57 pm

Awesome tutorial :D Je crois que je vais l'utiliser :D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 24th, 2009, 8:38 pm

très cool, a été l'espoir de trouver un tutoriel sur l'élargissement / l'effondrement divs par javascript. Qui savait tout ce que j'avais à faire était de regarder ma ozzu forum.
Use your words like arrows to shoot toward your goal.
  • Nina07
  • Born
  • Born
  • No Avatar
  • Inscription: Juin 16, 2010
  • Messages: 2
  • Status: Offline

Message Juin 16th, 2010, 2:20 am

Salut,

Merci pour le tutoriel.
Mais j'ai encore une question. J'utilise ce code dans une plus grande page HTML. Lorsque je clique sur agrandir ou réduire la page passe automatiquement en haut de la page. Yat-il un moyen de changer cela?

Merci.
  • sammiej
  • Born
  • Born
  • No Avatar
  • Inscription: Aoû 07, 2010
  • Messages: 2
  • Loc: Caribbean
  • Status: Offline

Message Août 7th, 2010, 1:46 pm

PERFECT! Juste ce dont j'avais besoin, vous êtes merveilleux, Merci!
Sam
  • missd
  • Born
  • Born
  • No Avatar
  • Inscription: Juin 08, 2011
  • Messages: 1
  • Status: Offline

Message Juin 8th, 2011, 10:59 pm

C'était fantastique et simple à suivre. Merci !
  • foseco
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 10, 2013
  • Messages: 1
  • Status: Offline

Message Mai 10th, 2013, 3:06 am

Salut je suis conscient que c'est un ancien sujet, mais je viens juste de commencer un wiki pour mon département IT. et ont juste trouvé ça. J'aime vraiment ce code et c'était juste ce que je cherchais mais comme Nina07, j'ai trop besoin de l'utiliser sur une grande page et il saute en arrière jusqu'en haut lorsqu'un bloc de texte est développé. Quelqu'un sait comment faire pour arrêter cela ?

Merci

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 7 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC