Hvordan sette et foreliggende Div dynamisk i jQuery

En del av moroa med å lage websider er å ha evnen til å flytte elementer rundt på siden. Statiske nettsider, som inneholder faste elementer, se det samme hver gang du besøker dem. Ved hjelp av Cascading Style Sheets, kan utviklere flytte elementer, slik som divs, ved å endre "top" og "venstre" CSS egenskapene til disse elementene. JQuery, et nyttig Javascript-bibliotek, har en "css" metode som hjelper deg å utføre denne oppgaven raskt.

Bruksanvisning

1 Start et tekstredigeringsprogram eller HTML-editor, og åpne en HTML-dokument.

2 Lim inn følgende DIV tag i dokumentets hoveddel:

<Div id = "testDiv">

<H1> Denne overskriften er inne i en div </ h1>

</ Div>

3 Legg til følgende kode i dokumentet manus seksjon:

Var divToMove = "testDiv";

Var topPosition = 100;

Var leftPosition = 200;

$ (Document) .ready (function () {

moveDIV (divToMove, topPosition, leftPosition);

});

Den "divToMove" variabelen inneholder id av DIV definert i kroppen delen. Den "topPosition" og "leftPosition" variabler holde de beste og venstre piksel koordinatene til punktet på siden der du ønsker å plassere DIV. I dette eksempelet er det stedet 100 piksler fra toppen og 200 piksler fra venstre. Den "$ (dokument) .ready" -funksjon passerer disse parametrene til "moveDIV" -funksjonen som beveger DIV.

4 Lim denne Javascript-funksjonen under koden vist i forrige trinn:

funksjon moveDIV (div, topp, venstre) {

$ ( "#" + Div) Css ( "posisjon", "absolutt");

$ ( "#" + Div) Css ( "topp", topp + "px");

$ ( "#" + Div) Css ( "venstre", venstre + "px");

}

Denne "moveDIV" funksjonen bruker JQuery "css" metoden for å flytte DIV til de ønskede koordinater.

5 Lagre dokumentet og vise den i nettleseren din. Når siden lastes, de "moveDIV" funksjon går og flytter DIV til plasseringen du angav i koden.

Hint

  • The $ (document) .ready funksjon kaller "moveDIV" -funksjonen når siden lastes for å demonstrere denne teknikken. Du kan også ringe "moveDIV" -modus på andre tidspunkter, for eksempel når en bruker klikker på en knapp. Husk å tildele id av DIV du ønsker å flytte til "divToMove" variable beskrevet i disse trinnene.