JQuery Kochbuch (German Edition)

Informations-Organisation muss man gelegentlich verschachtelte Daten anzeigen können.Wenn man die gesamten Informationen auf einmal zeigen würde, wären diese zu umfangreich und würden zu viel Platz auf der Seite in Anspruch nehmen. Also nutzen wir einen aufklappbaren Baum. Dessen Funktionalität, die man vor allem im Windows Explorer kennt (nicht zu verwechseln mit dem Internet Explorer), ermöglicht es einem Anwender, die einzelnen »Verzeichnisebenen« auf- und zuzuklappen.
    Lösung
    Durch Verwenden der jQuery-Selektoren für Kind-Elementeauf verschachtelten, ungeordneten Listen können wir zusätzliche Abschnitte einer Baumstruktur nach Bedarf anzeigen oder verbergen. Dazu fügen wir dem obersten Element der ungeordenten Liste das Attribut
class="tree"
hinzu und verwenden eine Kombination aus CSS und JavaScript, um die darunter liegenden Ebenen »aufzudecken«. Dadurch entsteht ein Baum wie in Figure 13-2 . Zusätzlich greifen wir auf die Event Delegation zurück, um beliebig tiefe Schachtelungen zu unterstützen, ohne allzu vielen Elementen Event Listener hinzufügen zu müssen. Stattdessen wird das Event auf der obersten Ebene von

über die jQuery-Methode
.live()
abgefangen.
    Figure 13-2. Anzeigen mehrerer Daten-Ebenen über einen Baum
    Baum – HTML-Code
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Alle anzeigen ~
    Alle verbergen

    
• 
         Erste
      
  
      
  • 
           Zweite
        
    
        
    • 
             Dritte
          
      
          
      • 
               Vierte
            
      
          
      • 
               Vierte
            
      
          
      • 
               Vierte
            
      
          
      • 
               Vierte
            
      
          
      • 
               Vierte
            
      
          
      
           ...
          
    
         ...
        
    
         ...
        
  
       ...
      
  
       ...
      

    ...

...


    Baum – jQuery-Code
// Initialisieren
function init_tree() {

// Ist das Element vorhanden
if (!$('ul.tree').length) {

    // Wenn nicht, beenden
    return;
}

// Ausklappen und einklappen
$('p.tree_controls a.expand_all, p.tree_controls a.collapse_all').click(function() {

    // Welche Klasse?
    if ($(this).hasClass('expand_all')) {
     $(this).parent('p').next('ul').find('a.tree_trigger')
     .addClass('trigger_expanded')
     .end().find('ul').addClass('tree_expanded');
     return false;
    } else {
     $(this).parent('p').next('ul').find('a.tree_trigger')
     .removeClass('trigger_expanded')
     .end().find('ul').removeClass('tree_expanded');
    }

    // Nicht folgen
    this.blur();
    return false;
});

// Auf Klicks im Baum lauschen
$('ul.tree a.tree_trigger').live('click', function() {

    // Ist die nächste

verborgen?
    if ($(this).next('ul').is(':hidden')) {
     $(this).addClass('trigger_expanded').next('ul')
     .addClass('tree_expanded');
    } else {
     $(this).removeClass('trigger_expanded').next('ul')
     .removeClass('tree_expanded');
    }

    // Nicht folgen
    this.blur();
    return false;
});

// Klasse für letztes
• .
  $('ul.tree li:last-child').addClass('last');
  
  // Status des Triggers ändern
  $('ul.tree_expanded').prev('a').addClass('trigger_expanded');
  }
  
  // Los geht's
  $(document).ready(function() {
  init_tree();
  });
      Diskussion
      Der Code für den Baum fügt den Links mit den Klassennamen
  expand_all
  und
  collapse_all
  erst einmal Eventhandler hinzu. Wird einer dieser Links angeklickt, durchlaufen wir das DOM bis zum