Spoileren er et praktisk værktøj til webstedet. Det bruges i vid udstrækning i forskellige fora og blogs, så brugeren kan skjule et bestemt element, når der trykkes på et knap. Desuden ser spoileren godt ud på siden og hjælper med at skjule de dele, der unødigt overbelaster siden.
Er det nødvendigt
Jquery-bibliotek
Instruktioner
Trin 1
Spoileren kan implementeres ved hjælp af det populære jquery-plugin-bibliotek skrevet på Java Script-programmeringssproget. Det bruges til at implementere fuld interaktion af programmeringssprog med HTML-markeringskoden på siden. Jquery-forbindelsen udføres ved hjælp af HTML ved hjælp af tag. Du skal angive det sted, hvor scriptet er placeret, og angive dets type: $ (dokument).ready (funktion ()
Trin 2
Tekstfragmentet, der er specificeret i et bestemt afsnit, skal være lukket i et separat lag - en div, ved hjælp af hvilken selve spoileren kontrolleres: Sasha gik langs motorvejen og sugede tørring.
Trin 3
Dernæst skal du oprette foran alle divs navngivne ødelægge tilsvarende knapper, der kollapser og udvider teksten. For det første er selve spoileren skjult ved hjælp af standardfunktionen "hide ()": $ ("div [name = 'spoil']"). Skjul (); Derefter skal du oprette en tekst og et billede til alle spoilere, som vil blive brugt som baggrund for knapperne: $ (“P [name = 'spoilbutton']”). Html (“Vis tekst”);
Trin 4
Find alle knapperne på siden, og se efter overskrifter på første niveau foran knappen. For at gøre dette skal du oprette en betingelse, der søger efter h1-tags efter navn. Den angivne titeltekst brydes ind i selve div: $ (“p [name = 'spoilbutton']"). Hver (funktion () {Hvis ($ (dette). Forrige (dette). Får (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (dette). Forrige (dette).html () +”Vis tekst”; $ (dette). Forrige (dette).replaceret med (“”); $ (dette).replaceWith (NewSpoilButton);}})
Trin 5
Dernæst skal du håndtere klik med museknappen med klik. Hvis der registreres et klik, kan det vises: $ (“div [name = 'spoilbutton']"). Klik på (funktion () {Hvis ($ (dette).næste (dette).css ("display") = =”Blok”) {
Trin 6
Skriv derefter arv. Inden for en div er teksten i afsnit p, hvis indhold er placeret i et span-tag: $ (dette).børn ("p"). Børn ("span"). Html ("Vis tekst"); Skjul åben spoiler. Hvis det ikke er åbent, skal du udvide teksten. Dette trin er baseret på arveleglen: $ (denne).næste (denne).slideUp ("normal");} andet {$ (denne).børn ("p"). Børn ("span"). Html ("Skjul tekst"); $ (denne).næste (denne).slideDown ("normal");} returner falsk; })
Trin 7
Derefter registreres selve musekliket på knappen, hvorved scriptet skjuler og udfolder spoileren. $ ("P [name = 'spoilbutton']"). Klik på (funktion () {Hvis ($ (dette).næste (dette).css ("display") = "blok") {$ (dette).næste (dette).slideUp (“normal”); $ (dette).html (“Skjul”);} returner falsk;}); Spoiler klar. Det vises, når der findes en matchende DIV-blok.
