Spojler je prikladan alat za web mjesto. Široko se koristi na raznim forumima i blogovima, omogućavajući korisniku da sakrije određeni element u trenutku pritiska gumba. Štoviše, spojler dobro izgleda na web mjestu i pomaže sakriti one dijelove koji nepotrebno preopterećuju stranicu.
Nužno je
Jquery knjižnica
Upute
Korak 1
Spoiler se može implementirati pomoću popularne knjižnice dodataka jquery napisane na programskom jeziku Java Script. Koristi se za provedbu potpune interakcije programskog jezika s HTML označnim kôdom stranice. Povezivanje jquery vrši se pomoću HTML-a pomoću oznake . Morate navesti mjesto gdje se skripta nalazi i postaviti njezinu vrstu: $ (document).ready (function ()
Korak 2
Fragment teksta naveden unutar određenog odlomka mora biti zatvoren u zaseban sloj - div, uz pomoć kojeg će se kontrolirati sam spojler: Sasha je hodao autocestom i isisavao sušenje.
3. korak
Dalje, morate stvoriti ispred svih div-ova s imenom 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, koja će se koristiti kao pozadina gumba: $ (“P [name = 'spoilbutton']”). Html („Prikaži tekst“);
4. korak
Pronađite sve gumbe na stranici i provjerite nalaze li se naslovi prve razine 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 upravljati klikom. 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 stavku 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 se korak temelji 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 gumb, kojim će skripta sakriti i razmotati 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 kad se pronađe odgovarajući DIV blok.
