Spoileren er et praktisk verktøy for nettstedet. Det er mye brukt i forskjellige fora og blogger, slik at brukeren kan skjule et bestemt element når du trykker på knappen. Videre ser spoileren bra ut på nettstedet og hjelper til med å skjule delene som unødvendig overbelaster siden.
Det er nødvendig
Jquery bibliotek
Bruksanvisning
Trinn 1
Spoileren kan implementeres ved hjelp av det populære plugin-biblioteket jquery skrevet på Java Script-programmeringsspråket. Den brukes til å implementere full interaksjon av programmeringsspråket med HTML-koden for siden. Jquery-tilkoblingen gjøres ved hjelp av HTML ved hjelp av -koden. Du må spesifisere stedet der skriptet ligger og angi typen: $ (dokument). Klar (funksjon ()
Steg 2
Tekstfragmentet som er spesifisert i et bestemt avsnitt, må være lukket i et eget lag - en div, ved hjelp av hvilken spoileren selv vil bli kontrollert: Sasha gikk langs motorveien og sugde tørking.
Trinn 3
Deretter må du lage foran alle divene med navnet spoil tilsvarende knapper som vil kollapse og utvide teksten. For det første er selve spoileren skjult ved hjelp av standard "hide ()" -funksjonen: $ ("div [name = 'spoil']"). Skjul (); Deretter må du lage en tekst og et bilde for alle spoilere, som vil bli brukt som bakgrunn for knappene: $ (“P [name = 'spoilbutton']”). Html (“Vis tekst”);
Trinn 4
Finn alle knappene på siden, og se etter overskriftene på første nivå foran knappen. For å gjøre dette, opprett en tilstand som vil søke etter h1-koder etter navn. Den angitte tittelteksten brytes inn i selve diven: $ (“p [name = 'spoilbutton']”). Hver (funksjon () {If ($ (dette).prev (dette).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (dette). Forrige (dette).html () +”Vis tekst”; $ (dette). Forrige (dette).replasser med (“”); $ (dette).replaceWith (NewSpoilButton);}})
Trinn 5
Deretter må du håndtere klikket på museknappen med klikk. Hvis et klikk oppdages, kan det vises: $ (“div [name = 'spoilbutton']"). Klikk på (funksjon () {If ($ (dette).neste (dette).css ("display") = =”Blokk”) {
Trinn 6
Skriv deretter arv. Innen en div er teksten i avsnitt p, hvis innhold er plassert i en span-tag: $ (dette).barn ("p"). Barn ("span"). Html ("Vis tekst"); Skjul åpen spoiler. Hvis den ikke er åpen, utvider du teksten. Dette trinnet er basert på arveregelen: $ (dette).neste (dette).slideUp ("normal");} annet {$ (dette).barn ("p"). Barn ("span"). Html ("Skjul tekst"); $ (dette).neste (dette).slideDown ("normal");} returner falsk; })
Trinn 7
Deretter registreres selve museklikket på knappen, som skriptet skjuler og bretter ut spoileren. $ ("P [name = 'spoilbutton']"). Klikk på (funksjon () {Hvis ($ (dette).neste (dette).css ("display") = "blokk") {$ (dette). Neste (dette).slideUp (“normal”); $ (dette).html (“Skjul”);} returner falsk;}); Spoiler klar. Det vises når en matchende DIV-blokk blir funnet.
