XML-Ecke

Struktur in den Content!

HTML-Liste mit jQuery als Chart visualisieren

Verschachtelte HTML-Listen stellt ein jQuery-Plugin des Londoner Entwicklers Wes Nolte als Organigramm dar. Der Code sucht im HTML-Dokument nach den Tags

<ul>
und
<li>
und wandelt diese in nodes, also in Knoten einer Baumstruktur um:
var $container = $("
<div class="&quot; + opts.chartClass + &quot;"></div>
");
if($this.is("ul")) {
buildNode($this.find("li:first"), $container, 0, opts);
}
else if($this.is("li")) {
buildNode($this, $container, 0, opts);
}
$appendTo.append($container);

Mit der CSS-Klasse “collapsed” kann man festlegen, dass bestimmte Knoten nicht ausgeklappt werden sollen, wie hier im Beispiel beim letzten “Child Level 4″. Der Cursor zeigt dann beim Mouseover an, dass sich hier weitere Knoten ausklappen lassen. Ebenso kann man auch alle Knoten einklappen, bis zum Root-Element hinauf.

Innerhalb der Listen-Elemente kann beliebiger HTML-Code eingefügt werden, etwa Links oder Bilder. Einziger Nachteil: Bei vielen Elementen einer Ebene, wird das Chart mit seiner Top-Bottom-Darstellung schnell unübersichtlich. Eine Anordnung der Knoten von links nach rechts ist bislang nicht möglich.

Posted in Im Lauf der Zeit | Tagged , | Leave a comment