Spojler je prikladan alat za web lokaciju. Široko se koristi na raznim forumima i blogovima, omogućavajući korisniku da sakrije određeni element u trenutku pritiska na dugme. Štoviše, spojler dobro izgleda na web lokaciji i pomaže sakriti one dijelove koji nepotrebno preopterećuju stranicu.
Neophodno je
Jquery biblioteka
Instrukcije
Korak 1
Spoiler se može implementirati pomoću popularne biblioteke dodataka jquery napisane na programskom jeziku Java Script. Koristi se za potpunu interakciju programskog jezika sa HTML kodom za označavanje stranice. Povezivanje jquery vrši se pomoću HTML-a pomoću oznake . Morate navesti lokaciju na kojoj se skripta nalazi i postaviti njen tip: $ (document).ready (function ()
Korak 2
Fragment teksta naveden u određenom pasusu mora biti zatvoren u zaseban sloj - div, pomoću kojeg će se upravljati samim spojlerom: Sasha je hodao autoputem i isisavao sušenje.
Korak 3
Dalje, morate stvoriti ispred svih div-ova pod nazivom spoil odgovarajuće gumbe koji će sažeti i proširiti tekst. Prvo se sam spojler skriva pomoću standardne funkcije "hide ()": $ ("div [name = 'spoil']"). Sakrij (); Dalje, trebate stvoriti tekst i sliku za sve spojlere, koji će se koristiti kao pozadina za dugmad: $ (“P [name = 'spoilbutton']”). Html („Prikaži tekst“);
Korak 4
Pronađite sve gumbe na stranici i provjerite postoje li naslovi prvog nivoa ispred gumba. Da biste to učinili, stvorite uvjet koji će tražiti h1 oznake po imenu. Navedeni se naslovni tekst umotava u sam div: $ (“p [name = 'spoilbutton']”). Svaka (funkcija () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Korak 5
Dalje, klikom na tipku miša trebate rukovati. Ako se otkrije klik, može se prikazati: $ ("div [name = 'spoilbutton']"). Kliknite (function () {If ($ (this).next (this).css ("display") = =”Blok”) {
Korak 6
Zatim napišite nasljedstvo. Unutar div-a, tekst je u pasusu p, čiji je sadržaj smješten u oznaku raspona: $ (this).children ("p"). Children ("span"). Html ("Show text"); Collapse otvoreni spojler. Ako nije otvoren, proširite tekst. Ovaj korak zasnovan je na pravilu nasljeđivanja: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Sakrij tekst”); $ (this).next (this).slideDown (“normal”);} return false; })
Korak 7
Tada se snima sam klik miša na dugme, kojim će skripta sakriti i otvoriti spojler. $ ("P [name = 'spoilbutton']"). Kliknite (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Spoiler spreman. Pojavit će se kada se pronađe odgovarajući DIV blok.
