Spoiler është një mjet i përshtatshëm për faqen. Përdoret gjerësisht në forume dhe bloge të ndryshme, duke lejuar përdoruesin të fshehë një element specifik në kohën e shtypjes së një butoni. Për më tepër, spoiler duket mirë në sit dhe ndihmon për të fshehur ato pjesë që mbingarkojnë pa nevojë faqen.
Është e nevojshme
Biblioteka
Udhëzimet
Hapi 1
Spoiler-i mund të implementohet duke përdorur bibliotekën popullore plug-in të jquery të shkruar në gjuhën e programimit Java Script. Përdoret për të zbatuar bashkëveprimin e plotë të gjuhës programuese me kodin HTML të shënimit të faqes. Lidhja jquery bëhet duke përdorur HTML duke përdorur etiketën . Ju duhet të specifikoni vendin ku ndodhet skenari dhe të vendosni llojin e tij: $ (dokumenti). Gati (funksioni ()
Hapi 2
Fragmenti i tekstit i specifikuar brenda një paragrafi të caktuar duhet të mbyllet në një shtresë të veçantë - një div, me ndihmën e së cilës do të kontrollohet vetë spoiler: Sasha eci përgjatë autostradës dhe thau thithjen.
Hapi 3
Tjetra, duhet të krijoni përpara të gjitha divave me emrin butonat përkatës të prishjes që do të shemben dhe zgjerojnë tekstin. Së pari, spoiler-i vetë fshihet duke përdorur funksionin standard "hide ()": $ ("div [name = 'spoil']"). Fshih (); Tjetra, duhet të krijoni një tekst dhe një imazh për të gjithë spoilerët, e cila do të përdoret si sfond për butonat: $ ("P [name = 'spoilbutton"]). Html ("Show text");
Hapi 4
Gjeni të gjithë butonat në faqe dhe kontrolloni për titujt e nivelit të parë përpara butonit. Për ta bërë këtë, krijoni një kusht që do të kërkojë për etiketat h1 me emër. Teksti i specifikuar i titullit përfundon në div vetë: $ ("p [name = 'spoilbutton']"). Secili (funksion () {Nëse ($ (ky).prev (ky). Merrni (0).tagName == "H1") {Var NewSpoilButton = " + $ (kjo).prev (kjo).html () + "Trego tekstin"; $ (kjo).prev (kjo).zëvendëso me ("); $ (kjo).zëvendësoni me (NewSpoilButton);}})
Hapi 5
Tjetra, duhet të trajtoni klikimin e butonit të miut me klikim. Nëse zbulohet një klikim, mund të shfaqet: $ ("div [name = 'spoilbutton']"). Kliko (funksioni () {If ($ (kjo).next (ky).css ("shfaqje") = = "Bllok") {
Hapi 6
Pastaj shkruaj trashëgiminë. Brenda një div, teksti është në paragrafin p, përmbajtja e të cilit vendoset në një hapësirë: $ (kjo). Fëmijë ("p"). Fëmijët ("hapësira"). Html ("Shfaq tekstin"); Collapse spoiler i hapur. Nëse nuk është i hapur, zgjeroni tekstin. Ky hap bazohet në rregullin e trashëgimisë: $ (kjo). Tjetër (kjo).slideUp ("normal");} tjetër {$ (kjo). Fëmijë ("p"). Fëmijët ("hapësira"). Html ("Fshih tekstin"); $ (kjo). Tjetër (kjo).slideDown ("normale");} kthimi false; })
Hapi 7
Pastaj regjistrohet vetë klikimi i miut mbi butonin, me anë të të cilit skenari do të fshehë dhe shpalosë spoiler. $ ("P [name = 'spoilbutton']"). Kliko (funksioni () {Nëse ($ (kjo). Tjetër (kjo).css ("ekran") = "bllok") {$ (ky). Tjetër (kjo).slideUp ("normal"); $ (kjo).html ("Fshih");} kthimi false;}); Spoiler gati. Do të shfaqet kur të gjendet një bllok i përputhshëm DIV.
