Hvordan lage Neste & tilbakeknapper

September 28

Når du klikker på nettleserens "Back" -knappen, tar det deg bakover gjennom nettloggen. "Neste" -knappen beveger deg fremover. Webutviklere har evnen til å etterligne denne nettleseren funksjonalitet i sine webapplikasjoner. Ved hjelp av Javascript, kan du gi dine besøkende muligheten til å navigere fritt gjennom dine websider uten å bruke nettleseren knapper. Du kan vise denne funksjonaliteten ved å opprette to websider og navigere mellom dem ved hjelp av "Neste" og "Tilbake" -knappene.

Bruksanvisning

Opprett første web side

1 Åpne Notisblokk og opprette et nytt dokument.

2 Legg til følgende kode i dokumentet:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Legg Java Nedenfor </ title>

</ Body>

</ Html>

Dette skaper en webside som inneholder en overskrift, en link til en annen webside og to knapper.

3 Legg til følgende linje med Javascript-kode under dokumentets "title" -delen:

<Script type = "text / javascript" og velg "Lagre som" for å vise "Lagre som" -vinduet.

5 Skriv "My_Test_Web_Page1" i "File Name" tekstboksen og klikk "Lagre" for å lagre filen på harddisken.

Lag Second webside

6 Trykk "Ctrl + N." Notisblokk vil vise et nytt dokument.

7 Legg til følgende kode i dokumentet:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Sett Java Nedenfor </ title>

</ Body>

</ Html>

Dette skaper en webside lik den forrige websiden. Denne siden inneholder også en overskrift, og to knapper.

8 Legg til denne linjen av Javascript-koden under dokumentets "title" -delen:

<Script type = "text / javascript" og velg "Lagre som" for å vise "Lagre som" -vinduet.

10 Skriv "My_Test_Web_Page2" i "File Name" tekstboksen og klikk "Lagre" for å lagre filen på harddisken.

Opprett Javascript-fil

11 Trykk "Ctrl + N." Notisblokk vil vise et nytt dokument.

12 Legg til følgende kode i dokumentet:

window.onload = initializeButtons;

funksjons initializeButtons () {

Var btnBack = document.getElementById ( "btnBack");

Var btnNext = document.getElementById ( "btnNext");

if (btnBack.addEventListener) {

btnBack.addEventListener ( "klikk", function () {navigere ( "tilbake")}, false);

btnNext.addEventListener ( "klikk", function () {navigere ( "neste")}, false);

}

else if (btnBack.attachEvent) {

btnBack.attachEvent ( "onclick", function () {navigere ( "tilbake")});

btnNext.attachEvent ( "onclick", function () {navigere ( "next")});

}

funksjon navigere (retning) {

if (retning == "neste") {

history.go (1);

alert ( 'neste');

}

else {

history.go (1);

alert ( 'back');

}

Den "initializeButtons" -funksjonen legger "klikk" hendelser til "Tilbake" og "Neste" knappene i de to HTML-sider. Den "navigere" -funksjonen utfører "history.go ()" metoden. Denne metoden tar en numerisk parameter. I dette eksempel er den parameteren "1" dersom verdien av den variable retningen er "neste". Hvis retningen variabelens verdi er "back," the "history.go" metoden bruker "-1".

1. 3 Klikk på "File" og velg "Lagre som" for å vise "Lagre som" -vinduet.

14 Skriv "JavaScriptCode.js" i "File Name" tekstboksen og klikk "Lagre".

15 Åpne Windows Utforsker, og finn den første filen du opprettet heter "My_Test_Webpage1.html." Dobbeltklikk filen for å vise den i nettleseren din.

16 Klikk på linken "Gå til My_Test_Webpage2." Nettleseren vil åpne den andre websiden som du opprettet. Det vil vise "Neste" og "Tilbake" -knappene.

17 Klikk på "Back" -knappen. Nettleseren vil føre deg tilbake til forrige side.

18 Klikk at sidens "Next" for å gå videre til neste side.

Hint

Den "history.go" metoden gjør beveger seg gjennom en nettleser historie mulig. Du kan navigere gjennom mer enn én side om gangen ved å endre verdien i "history.go" metoden. For eksempel, for å flytte bakover to sider, bruk "history.go (-2)" i stedet for "history.go (-1)."
Legg denne funksjonaliteten til en Web-side ved å legge den samme linjen i Javascript som du har lagt til websider i dette eksemplet.