Klickbar text visar en bild Öppna popup-fönster från en länk

JavaScript - klickbar lista

I avsnittet om Listor såg du ett exempel på en lista som öppnas i fler nivåer på ungefär samma sätt som i Utforskaren. Nu skall jag visa hur man gör en sådan lista. Jag skall dock redan nu tala om detta: Listan fungerar inte i Netscape. Där visas den redan från början som helt öppen med alla nivåerna synliga.

Pröva listan

Här kan du pröva listan. Klicka helt enkelt på "ledorden" så kommer de nya nivåerna fram.

Komplett redovisning av allt levande på Jorden
  • Djur
    • Flygande
      • Fjädriga
        • En pippi!
      • Håriga
        • En flygräv!
    • Icke flygande
      • Med ben utanpå
        • Arg
          • En elak hund.
        • Ej arg
          • En snäll ko.
      • Utan ben utanpå
        • Slingrig
          • Bitsk
            • En tuggorm.
          • Ej bitsk
            • En metmask.
        • Ej slingrig
          • I havet
            • Stillsam sjöborre.
          • Ej i havet
            • Uppspolad stillsam sjöborre.
  • Växter
    • Gröna
      • Barrväxt
        • Långa barr
          • Vanlig tall.
        • Korta barr
          • Julgran.
      • Ej barrväxt
        • Ätbar
          • Inslagen i plast
            • Något slags grönsak.
          • Ej inslagen i plast
            • Brysselkål.
        • Ej ätbar
          • Djupfryst
            • Spenat.
          • Ej djupfryst
            • Krukväxt från IKEA
    • Icke gröna
      • Slemmiga
        • I havet
          • Läbbig snärjtång.
        • Ej i havet
          • Rutten kosvamp.
      • Ej slemmiga
        • Svamp
          • Maskäten
            • Mandelkremla.
          • Ej maskäten
            • Giftmussling.
        • Ej svamp
          • Vit
            • Vitmossa.
          • Ej vit
            • Smutsig vitmossa.

Den här listan kräver en kombination av JavaScript och en ny tagg, <SPAN> ... </SPAN>, som är till för att fastställa ett textomfång.

Tidigare har du använt en stilmall som är kopplad till html-sidan. Nu skall du dessutom lägga in en direkt stilmall, som placeras i HEAD-taggen och bara påverkar sidan som den ligger i. Det gör du med ytterligare en tagg, <STYLE> ... </STYLE>.

I föregående avsnitt använde du händelsehanteraren onLoad. Den kommer du att använda även nu, för att anropa en funktion i ett JavaScript. Den funktionen styr händelsen onClick. Vi definierar som vanligt funktionen inom HEAD-taggarna, så att den finns färdig när sidan är laddad.

Slutligen kommer du att ge LI-taggarna ett CLASS-attribut, för att listan bara skall visa en nivå åt gången.

Men vi tar en sak i taget, och börjar med STYLE-taggen. Den ser ut så här:

<STYLE TYPE="text/css">
SPAN {font-family:arial;font-size:10pt}
UL LI UL {display:none}
</STYLE>

Det här lägger vi i HEAD, lämpligen direkt före den avslutande HEAD-taggen. De här raderna säger hur teckensnittet skall se ut inom taggarna <SPAN> och </SPAN>, samt att eventuella listor inte skall visa alla nivåer. Det är den här biten som inte fungerar i Netscape.

Sedan tar vi JavaScriptet, som vi lägger efter STYLE-raderna. Det innehåller funktionen visaVal() som kommer att anropas från onLoad i den inledande BODY-taggen:

<SCRIPT LANGUAGE="JavaScript1.2">
function visaVal() {
if (event.srcElement.className=="clsVal") {
var objRef=document.all[event.srcElement.sourceIndex+1];
if (objRef.style.display=="block") 
objRef.style.display="none";
else 
objRef.style.display="block";
}
}
</SCRIPT>

Nästa bit är händelsehanteraren onLoad som vi lägger i BODY-taggen, där den anropar funktionen visaVal() som i sin tur talar om vad händelsen onClick skall medföra:

<BODY onLoad="if (document.all) document.onClick=visaVal">

Och därmed har vi kommit fram till själva listan. Här visar jag koden till en förkortad version av listan ovan. Hela listan lägger du inom SPAN-taggar och varje listnivå utom den sista i varje kedja får attributet CLASS="clsVal":

<SPAN>
<UL>
<LI CLASS="clsVal">Djur
     <UL>
     <LI CLASS="clsVal">Flygande
          <UL>
          <LI CLASS="clsVal">Fjädriga
               <UL>
               <LI><B>En pippi!</B>
               </UL>
          <LI CLASS="clsVal">Håriga
               <UL>
               <LI><B>En flygräv!</B>
               </UL>
          </UL>
     <LI CLASS="clsVal">Icke flygande
          <UL>
          <LI CLASS="clsVal">Med ben utanpå
               <UL>
               <LI CLASS="clsVal">Arg
                    <UL>
                    <LI><B>En elak hund.</B>
                    </UL>
               <LI CLASS="clsVal">Ej arg
                    <UL>
                    <LI><B>En snäll ko.</B>
                    </UL>
               </UL>
          <LI CLASS="clsVal">Utan ben utanpå
               <UL>
               <LI CLASS="clsVal">Slingrig
                    <UL>
                    <LI CLASS="clsVal">Bitsk
                         <UL>
                         <LI><B>En tuggorm.</B>
                         </UL>
                    <LI CLASS="clsVal">Ej bitsk
                         <UL>
                         <LI><B>En metmask.</B>
                         </UL>
                    </UL>
               <LI CLASS="clsVal">Ej slingrig
                    <UL>
                    <LI CLASS="clsVal">I havet
                         <UL>
                         <LI><B>Stillsam sjöborre.</B>
                         </UL>
                    <LI CLASS="clsVal">Ej i havet
                         <UL>
                         <LI><B>Uppspolad stillsam sjöborre.</B>
                         </UL> 
                    </UL>
               </UL>
          </UL>
     </UL>
</UL>
</SPAN>

Indragen behöver inte finnas med - de är bara till för att göra det enklare (eller ens möjligt) att läsa koden.

Övningsuppgift

Gör en "utfällbar" lista och lägg in den på någon av dina sidor. Var noggrann med att avsluta alla nivåer rätt - kontrollera i webbläsaren så att du ser hur det fungerar.

Klickbar text visar en bild Öppna popup-fönster från en länk

© SupportData.Net