Anzeige
Tutorialbeschreibung

jQuery - Baummenüs mit Treeview

jQuery - Baummenüs mit Treeview

Baummenüs kennen Sie sicherlich von zahlreichen Webseiten. Von Vorteil sind solche Menüs vor allem im Bezug auf die Übersichtlichkeit. Aber auch wenn es darum geht, sehr viele Menüeinträge platzsparend unterzubringen, helfen solche Baummenüs weiter. Für jQuery gibt es zahlreiche Plug-ins, mit denen sich solche Baummenüs umsetzen lassen. Eines davon ist Treeview, das in diesem Tutorial vorgestellt wird.


Werfen Sie zunächst – wenn Sie nicht wissen, was es mit den angesprochenen Baummenüs auf sich hat – einen Blick auf die folgende Abbildung:

Bilder



 
Anhand der vor den einzelnen Menüeinträgen angezeigten Pluszeichen ist zu erkennen, dass diese Menüeinträge aufgeklappt werden können. Das geschieht, indem man den gewünschten Eintrag anklickt.

Bilder



 
Aus dem vorangestellten Plus- wird dann ein Minuszeichen und die Untereinträge des angeklickten Menüpunkts sind zu sehen.

Im Zusammenhang mit solchen Baummenüs darf der obligatorische Hinweis nicht fehlen, dass diese Menüs nicht nutzbar sind, wenn die Besucher in ihren Browsern JavaScript deaktivieren. Um solche Probleme zu umgehen, müssen/können Sie alternative Menüs bzw. Inhalte anbieten. Die vorliegende Anwendung wird bei deaktiviertem JavaScript jedenfalls nicht wie gewünscht funktionieren. Allerdings sind die Menüs durchaus nutzbar, da sie auf herkömmlichen Menülisten basieren.

Bilder



 
Die Menüeintrage sind also sicht- und sogar anklickbar. Ob Sie sich damit zufrieden geben oder eine alternative Lösung entwickeln, bleibt letztendlich aber natürlich Ihnen überlassen.


Zur Umsetzung des Baummenüs wird auf das jQuery-Plug-in Treeview zurückgegriffen. Die offizielle Projektseite finden Sie unter http://bassistance.de/jquery-plugins/jquery-plugin-treeview/.  Um das Plug-in nutzen zu können, muss zunächst das jQuery-Framework eingebunden werden.
<script type="text/javascript" src="jquery.js"></script>

Als Basis für das Menü wird eine ungeordnete Liste verwendet.
<ul id="browser" class="filetree treeview-famfamfam">
     <li><span class="folder">Folder 1</span>
       <ul>
         <li><span class="folder">Item 1.1</span>
           <ul>
             <li><span class="file">Item 1.1.1</span></li>
           </ul>
         </li>
         <li><span class="folder">Folder 2</span>
           <ul>
             <li><span class="folder">Subfolder 2.1</span>
               <ul id="folder21">
                 <li><span class="file">File 2.1.1</span></li>
                 <li><span class="file">File 2.1.2</span></li>
               </ul>
             </li>
             <li><span class="folder">Subfolder 2.2</span>
               <ul>
                 <li><span class="file">File 2.2.1</span></li>
                 <li><span class="file">File 2.2.2</span></li>
               </ul>
             </li>
           </ul>
         </li>
         <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
           <ul>
             <li><span class="file">File 3.1</span></li>
           </ul>
         </li>
         <li><span class="file">File 4</span></li>
       </ul>
     </li>
   </ul>

 
Neben dem jQuery-Framework werden zusätzliche Dateien benötigt. Laden Sie sich diese von der Seite http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ herunter.

Bilder



 
In dem heruntergeladenen Archiv sind neben den eigentlichen Plug-in-Dateien auch einige Beispiele enthalten. Zusätzlich gibt es dort einige CSS-Dateien und vor allem die passenden Grafiken.

Bilder



 
Diese können Sie direkt für Ihr Baummenü nutzen. Ebenso können Sie auf die enthaltenen CSS-Dateien zugreifen.
<link rel="stylesheet" href="jquery.treeview.css" /> 
<link rel="stylesheet" href="red-treeview.css" /> 
<link rel="stylesheet" href="screen.css" />

Diese CSS-Dateien sorgen für die Darstellung des Menüs. Aber Achtung: Wenn Sie diese Dateien verwenden, achten Sie darauf, dass die darin definierten Grafiken auch tatsächlich an dem angegebenen Ort vorhanden sind. Neben den genannten CSS-Dateien wird auf alle Fälle die eigentliche Plug-in-Datei benötigt, die ebenfalls im heruntergeladenen Zip-Archiv enthalten ist. Diese Datei muss eingebunden werden.
<script src="jquery.treeview.js" type="text/javascript"></script>

Damit sind die Voraussetzungen für das erste Baummenü erfüllt. Im einfachsten Fall lässt sich ein solches Menü folgendermaßen umsetzen.
[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function(){
    $("#browser").treeview({
    animated: "fast"
 })
 });
 /* ]]> */           
 </script>

Durch treeview() wird das Menü initialisiert. Wie die Animation, also das Auf- und Zuklappen der einzelnen Menüeinträge, ablaufen soll, wird im vorliegenden Beispiel über animated festgelegt. Dabei wird mit fast bestimmt, dass die Animation sehr schnell läuft. Wollen Sie hingegen eine langsame Animation, verwenden Sie slow.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function(){
    $("#browser").treeview({
    animated: "fast"
 })
 });
 /* ]]> */           
 </script>

animated orientiert sich bei den möglichen Optionen an dem aus jQuery bekannten animate()-Effekt. Ausführliche Informationen zu diesem Effekt finden Sie in der jQuery-API unter http://api.jquery.com/animate/.

Eine weitere interessante Option ist collapsed. Darüber bestimmt man, ob die vorhandenen Menüeinträge alle auf einmal angezeigt werden sollen. Mögliche Werte sind true und false.
[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function(){
    $("#browser").treeview({
    collapsed: true<
 })
 });
 /* ]]> */           
 </script>

 
Hier zunächst ein Beispiel für true:

Bilder



 
Das gleiche Menü nun mit collapsed: false.

Bilder



Über collapsed lässt sich also festlegen, ob die Menüeinträge ein- oder ausgeblendet sein sollen. In diesem Zusammenhang ist auch toggle interessant. Denn über toggle kann man ein Umschalten zwischen Ein- und Ausblenden der Menüeinträge umsetzen. Sind die Menüeintrage also ausgeblendet, werden Sie durch toggle eingeblendet. Klickt man den betreffenden Link anschließend erneut an, werden die Einträge wieder ausgeblendet. Auch hierzu wieder ein Beispiel:
[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function(){
             $("#black, #gray").treeview({
                         control: "#treecontrol",
                         persist: "cookie",
                         cookieId: "treeview-black"
             });
}); /* ]]> */          
</script>

Beachten Sie, dass Sie dafür zusätzlich die Datei jquery.cookie.js einbinden müssen, die ebenfalls im heruntergeladenen Archiv enthalten ist.


 

Zusätzliche Elemente einfügen

Durch wenige Zeilen Code können Sie Ihre Baummenüs um eine interessante Funktion erweitern: Dabei wird eine Schaltfläche zur Verfügung gestellt, durch deren Anklicken ein weiterer Eintrag dynamisch in das Menü aufgenommen wird. Damit das funktioniert, muss man zunächst ein entsprechendes Element anlegen. Im folgenden Beispiel wird dafür eine Schaltfläche definiert.
<button id="add">Hinzufügen!</button>

Klickt man diese an, wird in das Menü ein zusätzlicher Eintrag eingefügt. Die entsprechende Definition sieht folgendermaßen aus:
[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function(){
 $("#browser").treeview();
             $("#add").click(function() {
                         var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
                                    "<li><span class='file'>Item1</span></li>" + 
                                    "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
                         $("#browser").treeview({
                                    add: branches
                         });
                         branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
                         $("#browser").treeview({
                                    add: branches
                         });
             });
 });
 /* ]]> */           
 </script>

In diesem Beispiel werden zwei Fälle abgedeckt: Denn durch das Anklicken der Schaltfläche wird zunächst ein zusätzlicher Menüeintrag eingefügt. Diesem Eintrag werden parallel dazu zwei Untereinträge zugewiesen. Die Definition der Einträge geschieht dabei "hart", die Menüeinträge werden also den entsprechenden Variablen als direkter HTML-Code übergeben. Entscheidend ist dabei jeweils die Frage, wo die zusätzlichen Einträge eigentlich angefügt werden sollen. Verwendet wird dafür appendTo(). So wird über die folgende Anweisung bestimmt, dass der definierte Eintrag dem Bereich mit der ID browser zugewiesen wird.
appendTo("#browser")

Richtig flexibel wird eine solche Anwendung freilich erst, wenn man es den Benutzern selbst überlässt, wie die eigentlichen Menüeinträge heißen. Umsetzen lässt sich so etwas ganz einfach, indem man beispielsweise ein Formular mit einem Eingabefeld zur Verfügung stellt, in das die Besucher den Namen des neuen Menüeintrags eingeben können. Mit dem Absenden des Formulars wird dann der eingetragene Wert dem jQuery-Skript übergeben und letztendlich als Menüeintrag ausgegeben.


Fazit

Baummenüs lassen sich in JavaScript nur mit den notwendigen Programmierkenntnissen umsetzen. (Und selbst dann ist es fraglich, ob die Menüs in den verschiedenen Browsern gleichgut funktionieren.) Mit dem Plug-in Treeview kann man solche Baummenüs hingegen problemlos in seine Webseite einfügen. Dabei ist Treeview aber bei weitem nicht das einzige Baummenü-Plug-in für jQuery. Unter http://docs.jquery.com/ finden Sie bei Treeview-Nichtgefallen zahlreiche Alternativen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von derChris1412
  • 09.11.2010 - 14:04

Keine weiteren infos als auf der Seite des Entwicklers... schade hatte mir mehr erwartet!

x
×
×