Spoiler on saidi jaoks mugav tööriist. Seda kasutatakse laialdaselt erinevates foorumites ja ajaveebides, mis võimaldab kasutajal nupuvajutuse ajal konkreetset elementi peita. Pealegi näeb spoiler saidil hea välja ja aitab varjata neid osi, mis lehte asjatult üle koormavad.
See on vajalik
Jquery raamatukogu
Juhised
Samm 1
Spoilerit saab rakendada populaarse Jquery pistikprogrammide kogu abil, mis on kirjutatud Java Scripti programmeerimiskeeles. Seda kasutatakse programmeerimiskeele täieliku interaktsiooni teostamiseks lehe HTML-i märgistuskoodiga. Jquery-ühendus toimub HTML-i abil sildi abil. Peate määrama skripti asukoha ja määrama selle tüübi: $ (document).ready (function ()
2. samm
Teatud lõigus määratletud tekstifragment tuleb sulgeda eraldi kihti - div, mille abil kontrollitakse spoilerit ennast: Sasha kõndis mööda maanteed ja imes kuivamist.
3. samm
Järgmisena peate looma kõigi spoile nimega div-de ette vastavad nupud, mis ahendavad ja laiendavad teksti. Esiteks on spoiler peidetud, kasutades standardset funktsiooni "hide ()": $ ("div [name = 'spoil']"). Peida (); Järgmisena peate looma teksti ja pildi kõigile spoileritele, mida kasutatakse nuppude taustana: $ (“P [nimi = 'spoilbutton']"). Html („Kuva tekst");
4. samm
Leidke lehelt kõik nupud ja kontrollige, kas nupu ees on esimese taseme pealkirjad. Selleks looge tingimus, mis otsib h1 silte nime järgi. Määratud pealkirja tekst murrab endasse div: $ (“p [name = 'spoilbutton']"). Iga (funktsioon () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
5. samm
Järgmisena peate klõpsama hiire nupu klõpsuga. Kui klõps tuvastatakse, saab seda kuvada: $ (“div [name = 'spoilbutton']"). Klõpsake (function () {If ($ (this).next (this).css ("display") = = "Blokeeri") {
6. samm
Seejärel kirjutage pärand. Div piires on tekst paragrahvis p, mille sisu on paigutatud sildimärki: $ (this).children (“p”). Children (“span”). HTML („Show text”); ahenda avatud spoiler. Kui see pole avatud, laiendage teksti. See samm põhineb pärimisreeglil: $ (this).next (this).slideUp ("normaalne");} else {$ (this).lapsed ("p"). Lapsed ("span"). HTML ("Peida tekst"); $ (this).next (this).slideDown ("normal");} return false; })
7. samm
Seejärel salvestatakse hiire hiireklõps nupul, mille abil skript peidab spoileri lahti. $ (“P [name = 'spoilbutton']"). Klõpsake (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normaalne"); $ (this).html ("Peida");} return false;}); Spoiler valmis. See ilmub siis, kui leitakse vastav DIV-plokk.
