Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 31 Navigation
|  | 31.1 Navigation mit Pulldown-Menüs
|  | 31.2 Navigation mit DHTML
|  |  | 31.2.1 Baumstrukturen
|  | 31.3 Alternativen im Web
|  |  | 31.3.1 Joust
|  |  | 31.3.2 Weitere Ansätze
## 31.3 Alternativen im Web 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. ### 31.3.1 Joust 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-Objekt1 übergeben werden, in unserem Beispiel also entweder e für den Oberbegriff »Browserhersteller englisch« oder d für »Browserhersteller deutsch«. Hier klicken, um das Bild zu Vergrößern Abbildung 31.4 Auch die Joust-Seite verwendet das Joust-Menü (links). ### 31.3.2 Weitere Ansätze 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>
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 | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

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