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

      Schnelle Navigation mit Auswahllisten

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

      Das JavaScript

    <script language="JavaScript">
    <!-- unsichtbar für alte Browser
    function jumpto(form)
    {
    var myindex=form.jumplist1.selectedIndex
    if (form.jumplist1.options[myindex].value !="0")
    {
    location=form.jumplist1.options[myindex].value;
    }
    }
    // unsichtbar Ende -->
    </script>


    Und hier der dazugehörige HTML-Code

    <form name="form1">
    <select name="jumplist1" onChange="jumpto(this.form)" size=1>
    <option selected value="0">- Quick-Jump -
    <option value="URL#1">Link-Bez. 1
    <option value="URL#2">Link-Bez. 2
    <option value="URL#3">Link-Bez. 3
    <option value="URL#4">Link-Bez. 4
    <option value="URL#5">Link-Bez. 5
    </select>
    </form>

    Erklärungen und Variationen

  • Die Variable "jumplist1" kann im JavaScript- und HTML-Teil jederzeit geändert werden.
  • 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 Seiten/Ansätze.
  • Innerhalb der Auswahlliste können mit der Zeile:
    <option selected value="0"> Kommentar
    beliebige Kommentare eingefügt werden.

 

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