Ang spoiler ay isang maginhawang tool para sa site. Malawakang ginagamit ito sa iba't ibang mga forum at blog, na pinapayagan ang gumagamit na itago ang isang tukoy na elemento sa oras ng isang pindutin ang. Bukod dito, ang spoiler ay mukhang mahusay sa site at tumutulong na maitago ang mga bahaging iyon na hindi kinakailangang labis na karga sa pahina.
Kailangan iyon
Jquery library
Panuto
Hakbang 1
Ang spoiler ay maaaring ipatupad gamit ang sikat na jquery plug-in library na nakasulat sa wika ng programa ng Java Script. Ginagamit ito upang ipatupad ang buong pakikipag-ugnay ng wika ng programa sa markup code ng pahina ng pahina. Ang koneksyon sa jquery ay ginagawa gamit ang HTML gamit ang tag. Dapat mong tukuyin ang lokasyon kung saan matatagpuan ang script at itakda ang uri nito: $ (dokumento). Handa na (pagpapaandar ()
Hakbang 2
Ang fragment ng teksto na tinukoy sa loob ng isang tiyak na talata ay dapat na nakapaloob sa isang hiwalay na layer - isang div, sa tulong kung saan makokontrol ang spoiler: Naglakad si Sasha sa kahabaan ng highway at sinipsip ang pagpapatayo.
Hakbang 3
Susunod, kailangan mong lumikha sa harap ng lahat ng div na pinangalanang palayok na tumutugma sa mga pindutan na babagsak at palawakin ang teksto. Una, ang spoiler mismo ay nakatago gamit ang karaniwang "itago ()" na pagpapaandar: $ ("div [name = 'spo']"). Itago (); Susunod, kailangan mong lumikha ng isang teksto at isang imahe para sa lahat ng mga spoiler, na gagamitin bilang isang background para sa mga pindutan: $ ("P [name = 'spobutton']"). html ("Ipakita ang teksto");
Hakbang 4
Hanapin ang lahat ng mga pindutan sa pahina at suriin ang mga unang heading ng antas sa harap ng pindutan. Upang magawa ito, lumikha ng isang kundisyon na maghanap ng mga h1 na tag ayon sa pangalan. Ang tinukoy na teksto ng pamagat ay nakabalot sa div mismo: $ (“p [name = 'spobutton']”). Ang bawat (function () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoil Button = " + $ (ito).prev (ito).html () + "Ipakita ang teksto"; $ (ito).prev (ito).replaceWith ("); $ (ito).replaceWith (NewSpoil Button);}})
Hakbang 5
Susunod, kailangan mong hawakan ang pag-click ng pindutan ng mouse sa pamamagitan ng pag-click. Kung ang isang pag-click ay napansin, maaari itong ipakita: $ (“div [name = 'spobutton']”). Mag-click (function () {Kung ($ (ito). Susundan (ito).css ("display") = =”Block”) {
Hakbang 6
Pagkatapos sumulat ng mana. Sa loob ng isang div, ang teksto ay nasa parapo p, ang nilalaman nito ay inilalagay sa isang tag na span: $ (ito). Mga bata ("p"). Mga Bata ("span"). Html ("Ipakita ang teksto"); I-collapse buksan ang spoiler. Kung hindi ito bukas, palawakin ang teksto. Ang hakbang na ito ay batay sa panuntunang pamana: $ (ito).susunod (ito).slideUp ("normal");} iba pa {$ (ito). Mga bata ("p"). Mga bata ("span"). Html ("Itago ang teksto"); $ (ito).sumunod (ito).slideDown ("normal");} bumalik maling; })
Hakbang 7
Pagkatapos ang mismong pag-click ng mouse sa pindutan ay naitala, kung saan itatago at ilalahad ng script ang spoiler. $ (“P [name = 'spobutton']”). I-click ang (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (ito).slideUp ("normal"); $ (ito).html ("Itago");} bumalik maling;}); Handa na ang Spoiler. Lilitaw ito kapag natagpuan ang isang katugmang bloke ng DIV.
