Die spoiler is 'n gerieflike hulpmiddel vir die werf. Dit word wyd gebruik in verskillende forums en blogs, waardeur die gebruiker 'n spesifieke element kan verberg tydens die druk van die knoppie. Die spoiler lyk boonop goed op die werf en help om dele te verberg wat die bladsy onnodig oorlaai.
Dit is nodig
Jquery-biblioteek
Instruksies
Stap 1
Die spoiler kan geïmplementeer word met behulp van die gewilde jquery-invoegingsbiblioteek wat in die Java Script-programmeertaal geskryf is. Dit word gebruik om die volledige interaksie tussen die programmeertaal en die HTML-opmaakkode van die bladsy te implementeer. Die jquery-verbinding word met behulp van die HTML-tag gedoen. U moet die plek waar die script geleë is, spesifiseer en die tipe daarvan instel: $ (document).ready (function ()
Stap 2
Die teksfragment wat in 'n sekere paragraaf gespesifiseer word, moet in 'n aparte laag wees - 'n div, met behulp waarvan die spoiler self beheer sal word: Sasha loop langs die snelweg en suig droog.
Stap 3
Vervolgens moet u voor alle divs met die naam bederf-ooreenstemmende knoppies skep wat die teks sal ineenstort en uitbrei. Eerstens word die spoiler self versteek met behulp van die standaard "hide ()" - funksie: $ ("div [name = 'spoil']"). Versteek (); Vervolgens moet u 'n teks en 'n afbeelding vir alle spoilers skep, wat as agtergrond vir die knoppies gebruik sal word: $ (“P [name = 'spoilbutton']”). Html (“Toon teks”);
Stap 4
Soek al die knoppies op die bladsy en kyk na die eerste vlak opskrifte voor die knoppie. Om dit te doen, skep u 'n voorwaarde wat na h1-etikette op die naam sal soek. Die gespesifiseerde titelteks vou in die div self: $ ("p [name = 'spoilbutton']"). Elke (funksie () {If ($ (hierdie).voor (hierdie). Kry (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (hierdie). Vorige (hierdie).html () +”Vertoon teks”; $ (hierdie). Vorige (hierdie).replaceWith (“”); $ (hierdie).replaceWith (NewSpoilButton);}})
Stap 5
Vervolgens moet u die klik van die muisknoppie met klik hanteer. As 'n klik opgespoor word, kan dit vertoon word: $ ("div [name = 'spoilbutton']"). Klik op (funksie () {As ($ (hierdie). Volgende (hierdie).css ("vertoon") = =”Blok”) {
Stap 6
Skryf dan oorerwing. Binne 'n div is die teks in paragraaf p, waarvan die inhoud in 'n spanmerk geplaas word: $ (hierdie).kinders ('p'). Kinders ('span'). Html ('Toon teks'); Ineenstorting oop spoiler. As dit nie oop is nie, brei u die teks uit. Hierdie stap is gebaseer op die erfreg: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ("Verberg teks"); $ (hierdie).volg (hierdie).slideDown ("normaal");} vals terug; })
Stap 7
Dan word die klik van die muis op die knoppie opgeteken, waarmee die script die spoiler sal verberg en oopvou. $ ("P [name = 'spoilbutton']"). Klik op (funksie () {As ($ (hierdie).volg (hierdie).css ("vertoon") = "blok") {$ (hierdie). Volgende (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Spoiler gereed. Dit sal verskyn as 'n bypassende DIV-blok gevind word.
