Spoilerul este un instrument convenabil pentru site. Este utilizat pe scară largă în diferite forumuri și bloguri, permițând utilizatorului să ascundă un anumit element în momentul apăsării unui buton. Mai mult, spoilerul arată bine pe site și ajută la ascunderea acelor părți care supraîncarcă inutil pagina.
Este necesar
Biblioteca Jquery
Instrucțiuni
Pasul 1
Spoilerul poate fi implementat folosind populara bibliotecă plug-in jquery scrisă în limbajul de programare Java Script. Este folosit pentru a implementa interacțiunea completă a limbajului de programare cu codul de marcare HTML al paginii. Conexiunea jquery se face folosind HTML folosind eticheta . Trebuie să specificați locația în care se află scriptul și să setați tipul său: $ (document). Ready (function ()
Pasul 2
Fragmentul de text specificat într-un anumit paragraf trebuie să fie închis într-un strat separat - un div, cu ajutorul căruia spoilerul în sine va fi controlat: Sasha a mers de-a lungul autostrăzii și a aspirat uscarea.
Pasul 3
Apoi, trebuie să creați în fața tuturor divs-urilor denumite butoane corespunzătoare care se vor prăbuși și vor extinde textul. În primul rând, spoilerul în sine este ascuns folosind funcția standard „hide ()”: $ („div [name = 'spoil']”). Hide (); Apoi, trebuie să creați un text și o imagine pentru toate spoilerele, care va fi folosit ca fundal pentru butoanele: $ („P [name = 'spoilbutton']”). Html („Arată text”);
Pasul 4
Găsiți toate butoanele de pe pagină și verificați pentru titlurile de primul nivel din fața butonului. Pentru a face acest lucru, creați o condiție care va căuta etichetele h1 după nume. Textul titlului specificat se înfășoară în div: $ („p [name = 'spoilbutton']”). Fiecare (funcție () {If ($ (this).prev (this).get (0).tagName == „H1”) {Var NewSpoilButton = „” + $ (this).prev (this).html () +”Show text”; $ (this).prev (this).replaceWith („”); $ (this).replaceWith (NewSpoilButton);}})
Pasul 5
Apoi, trebuie să faceți clic pe butonul mouse-ului cu clic. Dacă este detectat un clic, acesta poate fi afișat: $ („div [name = 'spoilbutton']”). Click (funcție () {If ($ (this).next (this).css („display”) = =”Bloc”) {
Pasul 6
Apoi scrie moștenire. Într-o div, textul se află în paragraful p, al cărui conținut este plasat într-o etichetă span: $ (this).children („p”). Children („span”). Html („Show text”); Reduceți spoiler deschis. Dacă nu este deschis, extindeți textul. Acest pas se bazează pe regula de moștenire: $ (this).next (this).slideUp („normal”);} else {$ (this).children („p”). Children („span”). Html („Ascunde textul”); $ (this).next (this).slideDown („normal”);} return false; })
Pasul 7
Apoi este înregistrat chiar clicul mouse-ului pe buton, prin care scriptul va ascunde și desfășura spoilerul. $ („P [name = 'spoilbutton']”). Faceți clic pe (funcție () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp („normal”); $ (this).html („Hide”);} return false;}); Spoiler gata. Va apărea când se găsește un bloc DIV care se potrivește.
