Java Script Tutorial om Drop-Downs

January 22

Java Script Tutorial om Drop-Downs


En rullemenu kan hjælpe en webdesigner organisere webside layout ved at placere links til en JavaScript-menu. Ved at klikke på pilen i menuen, vil listen over links falde ned og lade websiden brugeren at vælge en placering. Dette design er nyttigt, hvis du har et stort antal af links skal vises på hjemmesiden, eller hvis du ønsker at organisere en lang række lister over links ved et bestemt emne.

Instruktioner

1 Start din HTML redigering program og åbne HTML-side, du ønsker at redigere.

2 Find <head> sektion af HTML websiden. Dette vil sædvanligvis være øverst i dokumentet.

3 Indsæt følgende script i <head> sektion. Dette script skal komme mellem åbningen <head> tag og det afsluttende </ head> tag.

<Script type = \ "text / javascript \">
<! -
funktion dropdown (mysel)
{
Var myWin, myVal

myVal = mySel.options [mySel.selectedIndex] .value

if (myVal)
{
if (mySel.form.target) myWin = forælder [mySel.form.target]

ellers myWin = vindue

if (! myWin) returnere sandt

myWin.location = myVal

}
return false

}
// ->
</ Script>

4 Find det sted i <body> i HTML-koden, hvor du gerne vil placere dit drop-down menuen.

5 Indsæt følgende <select> JavaScript-kode i denne placering:

<FORM

ACTION=\&quot;../cgi-bin/redirect.pl\&quot;
METHOD=POST onSubmit=\&quot;return dropdown(this.gourl)\&quot;>

<SELECT NAME = \ "gourl \">
<OPTION VÆRDI = \ "\"> Link List Header

<OPTION VÆRDI = \ "http: //www.yoururl.com \ & quot;> Navn på Link
<OPTION VÆRDI = \ "http: //www.yoururl.com \ & quot;> Navn på Link
<OPTION VÆRDI = \ "http: //www.yoururl.com \ & quot;> Navn på Link

</ SELECT>

<INPUT TYPE = INDSEND VÆRDI = \ "Go \">
</ FORM>

6 Change "Link List Header" at være emnet for din rullemenuen, eller at have en generisk header som "Vælg din destination."

7 Change "http: //www.yoururl.com” at være webadressen på det websted, du ønsker at inkludere i drop-down menuen.

8 Skift "Navn på Link" til navnet på dette websted, du ønsker at vise i drop-down menuen.

9 Tilføj flere links, som du har brug for ved at tilføje yderligere linjer af "<OPTION VÆRDI = \" http: //www.yoururl.com \ & quot;> Navn på Link "over </ select> tag.

10 Gem din redigerede HTML-fil og uploade filen til din vært for at se ændringerne.


relaterede artikler