News
Angebote
       ?print">Druckversion
Druckversion
  Toolbox Tipps & Tricks JavaScript Toolbox
 
Tipp 2: Schnelle Navigation mit Frames

      Schnelle Navigation mit Auswahllisten mit Frames

    Ein Beispiel (ohne Funktion):
    Um eine Auswahlliste für eine direkte Navigation in eine HTML-Seite einzubauen muss lediglich ein kurzes JavaScript erstellt werden und ein Formular-Teil im <body>-Bereich programmiert werden.
    Durch die Verwendung des onChange-Events entfällt wie in Tipp 1 das Drücken eines Aktions-Buttons.

      Das JavaScript
    Diesmal erstellen wir das JavaScript in einer externen Datei namens genmenu.js

    // kompatibel zu Browsern NS und IE ab V3.x
    function JumpToMenu(targ, selObj, refresh)
      {
      eval(targ+".location='"+selObj.options
         [selObj.selectedIndex].value+"'");
      if (refresh) selObj.selectedIndex=0;
      }


    Und hier der dazugehörige HTML-Code

    Wir benötigen zuerst eine Index-Datei zum Definieren des Framesets.
    Es werden darin zwei Frames, in Zeilen angeordnet, festgelegt.
    Als Namen erhalten diese oben und unten.

    Der HTML-Code dazu sieht so aus:

    <frameset rows="20%,80%">
      <frame src="oben.html" name="oben">
      <frame src="unten.html" name="unten">
    </frameset>


    Im <head>-Bereich muss das externe JavaScript eingebunden werden mit:

    <script language="JavaScript"  src="genmenu.js"
      type="text/javascript"></script>


    Im <body>-Bereich wird dann das Formular definiert mit:

    <form name="form2">
      <select name="menu2"
       onChange="JumpToMenu('parent.unten',this,0)" size=1>
       <option value="URL1.html" selected>Bitte wählen:
       <option value="URL2.html">Home
       <option value="URL3.html">News
       <option value="URL4.html">Über uns
       <option value="URL5.html">Profil
       <option value="URL6.html">Produkte
       <option value="URL7.html">Service
      </select>
    </form>

    Erklärungen und Variationen

  • Die Funktion eval(ausdruck) wertet den JavaScript-Code aus, der in dem String ausdruck angegeben wird.
  • Die Größe der Liste wird mit size=1 im <select>-Tag auf eine sichtbare Zeile reduziert. Die Auswahlliste verhält sich dadurch wie eine übliche Pulldown-Liste.
  • Der mit selected gekennzeichnete Eintrag ist vorselektiert.
  • Anstelle der URL#n stehen die Links auf die gewünschten unteren Frames.
  • Innerhalb der Auswahlliste können mit der Zeile:
    <option selected value="0"> Kommentar
    beliebige Kommentare eingefügt werden.

      Hier ein ausführliches Beispiel zum Download
      (Freeware; deutsch)
    Entpacken Sie das Archiv in einem Verzeichnis Ihrer Wahl. Start-Dokument ist die "index.html"-Datei.
      JavaScript-Navigator (ZIP-Archiv der Dateien, Größe 6 KB)
 

Last Updated: 28.11.2009 - Poly4Media: WebAdmin - © by Poly4Media® 2000-2009