Spoileris ir ērts vietnes rīks. To plaši izmanto dažādos forumos un emuāros, ļaujot lietotājam pogas nospiešanas laikā paslēpt konkrētu elementu. Turklāt spoileris labi izskatās vietnē un palīdz paslēpt tās daļas, kas nevajadzīgi pārslogo lapu.
Tas ir nepieciešams
Jquery bibliotēka
Instrukcijas
1. solis
Spoileri var ieviest, izmantojot populāro Jquery spraudņu bibliotēku, kas rakstīta Java Script programmēšanas valodā. To izmanto, lai ieviestu pilnīgu programmēšanas valodas mijiedarbību ar lapas HTML iezīmēšanas kodu. Jquery savienojums tiek veikts, izmantojot HTML, izmantojot tagu . Jums jānorāda skripta atrašanās vieta un jāiestata tā tips: $ (document).ready (function ()
2. solis
Noteiktā rindkopā norādītais teksta fragments jāievieto atsevišķā slānī - div, ar kura palīdzību tiks kontrolēts pats spoileris: Saša gāja pa šoseju un iesūc žāvēšanu.
3. solis
Pēc tam jums ir jāizveido visu divu priekšā, kas nosaukti sabojāt atbilstošās pogas, kas sabruks un paplašinās tekstu. Pirmkārt, pats spoileris tiek paslēpts, izmantojot standarta funkciju "hide ()": $ (“div [name = 'spoil']"). Slēpt (); Tālāk jums jāizveido teksts un attēls visiem spoileriem, kas tiks izmantots kā fons pogām: $ (“P [name = 'spoilbutton']"). Html (“Rādīt tekstu”);
4. solis
Atrodiet visas pogas lapā un pārbaudiet, vai pogas priekšā ir pirmā līmeņa virsraksti. Lai to izdarītu, izveidojiet nosacījumu, kas meklēs h1 tagus pēc nosaukuma. Norādītais virsraksta teksts ietinās pašā div: $ (“p [name = 'spoilbutton']"). Katrs (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. solis
Pēc tam jums ir jārīkojas ar peles pogas klikšķi ar klikšķi. Ja tiek konstatēts klikšķis, to var parādīt: $ (“div [name = 'spoilbutton']"). Noklikšķiniet uz (function () {If ($ (this).next (this).css (“display”) = = “Bloķēt”) {
6. solis
Tad uzrakstiet mantojumu. Div ietvaros teksts atrodas p rindkopā, kura saturs ir ievietots span tagā: $ (this).children (“p”). Children (“span”). Html (“Show text”); Sakļaut atvērts spoileris. Ja tas nav atvērts, izvērsiet tekstu. Šī darbība ir balstīta uz mantojuma kārtulu: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Hide text”); $ (this).next (this).slideDown (“normal”);} return false; })
7. solis
Tad tiek ierakstīts pats peles klikšķis uz pogas, ar kuru skripts paslēpsies un izvērsīs spoileri. $ (“P [name = 'spoilbutton']"). Noklikšķiniet uz (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp (“normāls”); $ (this).html (“Hide”);} return false;}); Spoileris gatavs. Tas parādīsies, kad tiks atrasts atbilstošs DIV bloks.
