Spoileris yra patogus įrankis svetainei. Jis plačiai naudojamas įvairiuose forumuose ir tinklaraščiuose, leidžiantis vartotojui paslėpti konkretų elementą paspaudus mygtuką. Be to, spoileris gerai atrodo svetainėje ir padeda paslėpti tas dalis, kurios be reikalo perkrauna puslapį.
Tai būtina
„Jquery“biblioteka
Nurodymai
1 žingsnis
Spoileris gali būti įgyvendinamas naudojant populiarią „jquery“įskiepių biblioteką, parašytą „Java Script“programavimo kalba. Jis naudojamas norint įgyvendinti visišką programavimo kalbos sąveiką su puslapio HTML žymėjimo kodu. Jquery ryšys atliekamas naudojant HTML naudojant žymą . Turite nurodyti scenarijaus vietą ir nustatyti jo tipą: $ (document).ready (function ()
2 žingsnis
Tam tikroje pastraipoje nurodytas teksto fragmentas turi būti apgaubtas atskiru sluoksniu - div, kurio pagalba bus valdomas pats spoileris: Sasha ėjo greitkeliu ir čiulpė džiovinimą.
3 žingsnis
Tada turite sukurti priešais visus divus, pavadintus sugadinti, atitinkamus mygtukus, kurie sugrius ir išplės tekstą. Pirma, pats spoileris yra paslėptas naudojant standartinę „hide ()“funkciją: $ („div [name = 'spoil']“). Slėpti (); Tada jums reikia sukurti visų spoilerių tekstą ir vaizdą, kuris bus naudojamas kaip mygtukų fonas: $ („P [name = 'spoilbutton']“). Html („Rodyti tekstą“);
4 žingsnis
Suraskite visus mygtukus puslapyje ir patikrinkite, ar priešais mygtuką yra pirmojo lygio antraštės. Norėdami tai padaryti, sukurkite sąlygą, kuri ieškos h1 žymų pagal pavadinimą. Nurodytas antraštės tekstas įtraukiamas į patį div: $ („p [name = 'spoilbutton']“). Kiekviena (funkcija () {If ($ (this).prev (this).get (0).tagName == „H1“) {Var NewSpoilButton = „“+ $ (this).prev (this).html () + „Show text“; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
5 žingsnis
Tada turite spustelėti pelės klavišo paspaudimą. Jei aptinkamas paspaudimas, jis gali būti rodomas: $ („div [name = 'spoilbutton']“]. Spustelėkite (function () {If ($ (this).next (this).css („display“) = = „Blokuoti“) {
6 žingsnis
Tada parašykite palikimą. Dalyje „div“tekstas yra p pastraipoje, kurios turinys dedamas į žymę: $ (this).children („p“). Children („span“). Html („Show text“); Sutraukti atviras spoileris. Jei jis nėra atidarytas, išplėskite tekstą. Šis žingsnis pagrįstas paveldėjimo taisykle: $ (this).next (this).slideUp („normal“);} else {$ (this).children („p“). Children („span“). Html („Slėpti tekstą“); $ (this).next (this).slideDown („normal“);} return false; })
7 žingsnis
Tada užfiksuojamas pats pelės paspaudimas ant mygtuko, kuriuo scenarijus paslėps ir išskleis spoilerį. $ („P [name = 'spoilbutton']"). Spustelėkite (function () {If ($ (this).next (this).css („display“) =”block”) {$ (this).next (this).slideUp („normal“); $ (this).html („Hide“);} return false;}); Spoileris paruoštas. Jis pasirodys, kai bus rastas atitinkamas DIV blokas.
