Galileo Computing < openbook > Galileo 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
Galileo 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


Galileo 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.


Galileo 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).


Galileo 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
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 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.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de