Spojler je priročno orodje za spletno mesto. Pogosto se uporablja na različnih forumih in blogih, kar uporabniku omogoča, da v času pritiska na gumb skrije določen element. Poleg tega se spojler dobro prikaže na spletnem mestu in pomaga pri skrivanju tistih delov, ki po nepotrebnem preobremenijo stran.
Potrebno je
Knjižnica Jquery
Navodila
Korak 1
Spoiler je mogoče implementirati s pomočjo priljubljene knjižnice vtičnikov jquery, napisane v programskem jeziku Java Script. Uporablja se za popolno interakcijo programskega jezika z označevalno kodo HTML strani. Povezava jquery se izvede z uporabo HTML-ja z uporabo oznake . Določiti morate mesto, kjer se skript nahaja, in določiti njegovo vrsto: $ (dokument).ready (funkcija ()
2. korak
Del besedila, določen v določenem odstavku, mora biti zaprt v ločeno plast - div, s pomočjo katerega bo nadzorovan sam spojler: Sasha je hodila po avtocesti in sesala sušenje.
3. korak
Nato morate pred vsemi div-ji z imenom pokvariti ustrezne gumbe, ki bodo strnili in razširili besedilo. Najprej je sam spojler skrit s standardno funkcijo "hide ()": $ ("div [name = 'spoil']"). Skrij (); Nato morate ustvariti besedilo in sliko za vse spojlerje, ki bo uporabljeno kot ozadje za gumbe: $ (“P [name = 'spoilbutton']"). Html ("Prikaži besedilo");
4. korak
Poiščite vse gumbe na strani in pred gumbom preverite naslove prve ravni. Če želite to narediti, ustvarite pogoj, ki bo iskal oznake h1 po imenu. Navedeno besedilo naslova se zavije v sam div: $ ("p [name = 'spoilbutton']"). Vsak (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
5. korak
Nato morate klikniti gumb miške s klikom. Če je klik zaznan, se lahko prikaže: $ ("div [name = 'spoilbutton']"). Kliknite (function () {If ($ (this).next (this).css ("display") = = "Blok") {
6. korak
Nato napišite dediščino. Znotraj div je besedilo v odstavku p, katerega vsebina je postavljena v oznako razpona: $ (this).children (“p”). Children (“span”). Html (“Show text”); Strni odprt spojler. Če ni odprta, razširite besedilo. Ta korak temelji na pravilu dedovanja: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Skrij besedilo”); $ (this).next (this).slideDown (“normal”);} return false; })
7. korak
Nato se posname že sam klik miške na gumb, s katerim bo skript skril in razkril spojler. $ (“P [name = 'spoilbutton']"). Kliknite (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Spoiler pripravljen. Pojavil se bo, ko bo najden ustrezen blok DIV.
