Tutorial på hvordan å trekke ned menyer i Java Script

September 9

Javascript lar deg lage dynamiske dråpe (pull) down menyer. Javascript-kode er normalt lukket direkte i html dokument som fjerner behovet for to filer, en for html-dokument og en for manuset. Javascript-koden kan finnes hvor som helst i dokumentet, men er ofte plassert i hodedelen. Koden kalles da i kroppen av dokumentet.

Javascript-kode

Skriptet er inkludert i denne artikkelen vil skape en rullegardinmeny som vil ta brukeren til en ny nettside som snart er valgt.

Den første funksjonen vil skape en matrise.

fungere createArray ()
{Var arg = createArray.arguments
GÅ
for (var i = 0; i <arg.length; i ++)
{Dette [i] = arg [i]; }
this.length = arg.length
GÅ
}

Deretter vil du fylle array med web-adressen (URL-adresser) for menyelementer. Hvis du har mer enn en meny på websiden din, kan du lage mer enn en array.

Var urls = new createArray (
\ "Http: //yahoo.com \ & quot ;,
\ "Http: //google.com \ & quot ;,
\ "Http: //msn.com \ & quot ;,
\ "Http: //facebook.com \ & quot ;,
\ "Http: //myspace.com \ & quot;)
GÅ

Den endelige Javascript-funksjonen vil åpne menyvalget i det samme vinduet som den gjeldende siden.

funksjon openURL (som)
{M = which.selectedIndex;
URL = webadresser [m]
GÅ
location.href = URL; }

Menyelementene vil hver ha et indeksnummer. Dette nummeret er referert i "m = which.selectedIndex" statement. Indeksen nummeret brukes i "URL = webadresser [m]" uttalelse som får riktig URL fra tabellen. Den "location.href = URL" statement forteller leseren til å gå til det nye nettstedet.

HTML-dokument

Javascript-koden er plassert i skriptet elementene i hodet delen av HTML-dokumentet. Du bør også legge koden i en kommentar, slik at det ikke vil bli lest av nettlesere som ikke støtter scripting.

skapes Selve formen i hovedtekstdelen av dokumentet. Det er opprettet med det velge element og navnene på nettstedene holdes innenfor opsjonselementer. Du trenger ikke legge til web-adresser som verdier for opsjonselementet som de holdes i matrisen opprettet ovenfor.

<Body>
<Form name = \ "Form \">
<Velg name = \ "-menyen \" onChange = \ "openURL () \">
<Option> Yahoo </ option>
<Option> Google </ option>
<Option> MSN </ option>
<Option> Facebook </ option>
<Option> MySpace </ option>
</ Velge>
</ Form>
</ Body>

Du kan legge til mer funksjonalitet ved å legge mouse hendelser for å skape skyve menyer. Du kan også legge til flere menyer ved å legge til et nummer i rekken variable og deretter passerer det tallet til "openURL ()" -funksjon.