Spoilern är ett praktiskt verktyg för webbplatsen. Det används i stor utsträckning i olika forum och bloggar, så att användaren kan dölja ett specifikt element vid en knapptryckning. Dessutom ser spoilern bra ut på webbplatsen och hjälper till att dölja de delar som onödigt överbelastar sidan.
Det är nödvändigt
Jquery-biblioteket
Instruktioner
Steg 1
Spoilern kan implementeras med det populära jquery-tilläggsbiblioteket skrivet på Java Script-programmeringsspråket. Den används för att implementera fullständig interaktion av programmeringsspråket med HTML-märkningskoden på sidan. Jquery-anslutningen görs med HTML med taggen. Du måste ange platsen där skriptet finns och ange typ: $ (dokument).ready (funktion ()
Steg 2
Textfragmentet som anges i ett visst stycke måste vara inneslutet i ett separat lager - en div, med hjälp av vilken spoilern själv kommer att kontrolleras: Sasha gick längs motorvägen och sugade torkning.
Steg 3
Därefter måste du skapa framför alla divs med namnet spoil motsvarande knappar som kommer att kollapsa och expandera texten. Först döljs själva spoilern med standardfunktionen "hide ()": $ ("div [name = 'spoil']"). Dölj (); Därefter måste du skapa en text och en bild för alla spoilers, som kommer att användas som bakgrund för knapparna: $ (“P [name = 'spoilbutton']”). Html (“Visa text”);
Steg 4
Hitta alla knapparna på sidan och leta efter rubriker på första nivån framför knappen. För att göra detta skapar du ett villkor som söker efter h1-taggar efter namn. Den angivna titeltexten slås in i själva div: $ (“p [name = 'spoilbutton']”). Varje (funktion () {If ($ (detta).prev (detta).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (detta).prev (detta).html () +”Visa text”; $ (detta).prev (detta).replaceWith (“”); $ (detta).replaceWith (NewSpoilButton);}})
Steg 5
Därefter måste du hantera musklickets klick med ett klick. Om ett klick upptäcks kan det visas: $ (“div [name = 'spoilbutton']"). Klicka på (funktion () {If ($ (detta). Nästa (detta).css ("display") = =”Blockera”) {
Steg 6
Skriv sedan arv. Inom en div finns texten i stycke p, vars innehåll placeras i en span-tagg: $ (detta).barn ("p"). Barn ("span"). Html ("Visa text"); Dölj öppen spoiler. Om den inte är öppen, expandera texten. Detta steg är baserat på arvsregeln: $ (detta).nästa (detta).slideUp ("normalt");} annat {$ (detta).barn ("p"). Barn ("span"). Html ("Dölj text"); $ (detta).nästa (detta).slideDown ("normalt");} returnera falskt; })
Steg 7
Sedan spelas in musklicket på knappen, genom vilket manuset kommer att dölja och vika ut spoilern. $ (“P [name = 'spoilbutton']”). Klicka på (funktion () {If ($ (detta). Nästa (detta).css ("display") = "block") {$ (detta). Nästa (detta).slideUp (“normal”); $ (detta).html (“Göm”);} returnera falskt;}); Spoiler redo. Det visas när ett matchande DIV-block hittas.
