Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 31 Navigation
  gp 31.1 Navigation mit Pulldown-Menüs
  gp 31.2 Navigation mit DHTML
    gp 31.2.1 Baumstrukturen
  gp 31.3 Alternativen im Web
    gp 31.3.1 Joust
    gp 31.3.2 Weitere Ansätze


Rheinwerk Computing

31.3 Alternativen im Web  downtop

Im World Wide Web gibt es wie angekündigt mehrere unterschiedliche Ansätze zum Thema Navigation mit JavaScript/DHTML. Zum Abschluss dieses Kapitels sollen zwei Vertreter dieses Bereichs gebührende Erwähnung finden. Diese zeichnen sich dadurch aus, dass sie ständig weiterentwickelt werden. Damit ist zu hoffen, dass diese Skripten auch beim Erscheinen neuer Browserversionen stets aktuell und verwendbar bleiben.


Rheinwerk Computing

31.3.1 Joust  downtop

Unter http://www.ivanpeters.com/index.htm?page=/joust/ (wenn das nicht funktioniert, gehen Sie über die Homepage http://www.ivan-peters.com/) finden Sie Joust, ein System, mit dem eine Menüstruktur, die dem Windows Explorer (oder Derivaten) ähnelt, leicht mit JavaScript abgebildet werden kann. Die Software kann gratis heruntergeladen und eingesetzt werden (lesen Sie aber die Lizenzbedingung).

Um das Skript an Ihre eigenen Bedürfnisse anzupassen, müssen Sie lediglich Ihre Menüstruktur in JavaScript-Code fassen. Jedes Menüelement in Joust hat eine eigene, numerische ID. Bei jedem Element können Sie zudem angeben, welches Element sein Vaterelement ist. So ist eine eindeutige Abbildung der Struktur möglich, und auch Verschachtelungen können mit Joust realisiert werden.

var e = theMenu.addEntry(-1,
                         "Folder",
                         "Browserhersteller englisch",
                         "englisch.html",
                         null);
theMenu.addChild(e,
                 "Document",
                 "Microsoft englisch",
                 "http://www.microsoft.com/",
                 null);
theMenu.addChild(e,
                 "Document",
                 "Mozilla englisch",
                 "http://www.mozilla.com/",
                 null);
theMenu.addChild(e,
                 "Document",
                 "Opera englisch",
                 "http://www.opera.com/",
                 null);
var d = theMenu.addEntry(-1,
                         "Folder",
                         "Browserhersteller deutsch",
                         "deutsch.html",
                         null);
theMenu.addChild(d,
                 "Document",
                 "Microsoft deutsch",

                 "http://www.microsoft.de/",
                 null);
theMenu.addChild(d,
                 "Document",
                 "Firefox deutsch",
                 "http://www.firefox-browser.de/",
                 null);

In der Variablen theMenu steht (zumindest im Standardcode) eine Referenz auf das Menüobjekt. Mit der Methode addEntry() fügen Sie dem Menü einen neuen Punkt auf oberster Ebene hinzu. Der Rückgabewert der Funktion ist der Identifikator des Menüeintrags.

Die Methode addChild() dagegen fügt nicht einen Oberpunkt, sondern einen Unterpunkt hinzu. Deswegen muss als erstes Argument an die Funktion eine Referenz auf das Parent-Objekt übergeben werden, in unserem Beispiel also entweder e für den Oberbegriff »Browserhersteller englisch« oder d für »Browserhersteller deutsch«.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 31.4     Auch die Joust-Seite verwendet das Joust-Menü (links).


Rheinwerk Computing

31.3.2 Weitere Ansätze  toptop

Eine einfache Suche bei jeder Suchmaschine fördert eine unübersichtliche Zahl von DHTML-Menüs zu Tage. Eine spezielle Empfehlung wird an dieser Stelle nicht ausgesprochen, denn ein solches Menü lebt davon, dass es regelmäßig gepflegt und aktualisiert wird, damit möglichst viele (moderne) Browser unterstützt werden. Achten Sie also nicht nur darauf, wie gut das Menü in Ihrem Browser funktioniert, sondern auch darauf, wie das in anderen Browsern aussieht. Auch der Veröffentlichungszyklus des Menüs ist wichtig. Das im vorherigen Abschnitt vorgestellte Joust beispielsweise ist ein Web-Klassiker, hat allerdings seine besten Zeiten eigentlich schon hinter sich. Der Code ist aber so gut geschrieben, dass er immer noch recht gut funktioniert.

Ebenfalls interessant ist es, einen Blick auf die jeweilige serverseitige Technologie zu werfen; manche bieten ebenfalls ein clientseitiges DHTML-Menü an – das serverseitig mit Daten gefüttert wird. Hier zur Illustration das Menü von ASP.NET 2.0. Sie benötigen zunächst eine XML-Datei (Web.sitemap) mit einer Beschreibung der einzelnen Navigationspunkte:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   <siteMapNode url="Default.aspx" title="Homepage" description="Homepage der Anwendung">
      <siteMapNode url="Produkte.aspx" title="Produkte" description="Unsere Produkte" />
      <siteMapNode url="Kontakt.aspx" title="Kontakt" description="Impressum und Kontaktformular" />
   </siteMapNode>
</siteMap>

Diese Sitemap wird von einem speziellen serverseitigen Steuerelement von ASP.NET 2.0 interpretiert und erstellt daraus ein schönes JavaScript-Menü – weitgehend browserunabhängig. Die Arbeitsersparnis ist natürlich enorm.

<%@ Page Language="JScript" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>JavaScript-Menü</title>
</head>
<body>

<form runat="server">
   <asp:Menu
      ID="Menu1"
      runat="server"
      DataSourceID="SiteMapDataSource1">
   </asp:Menu>
   <asp:SiteMapDataSource
      ID="SiteMapDataSource1"
      runat="server" />
</form>
</body>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 31.5     Ein DHTML-Menü mit wenigen Zeilen Markup

 




1  Der Anglizismus bleibt hier bestehen. In der deutschsprachigen Literatur wird »parent object« meist mit »Vaterobjekt« übersetzt, das englische Wort »parent« ist jedoch geschlechtsneutral und bedeutet »Elternteil«.

 <<   zurück
  
  Zum Katalog
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de