Спойлер сайт үшін ыңғайлы құрал болып табылады. Ол әртүрлі форумдарда және блогтарда кеңінен қолданылады, бұл батырма басылған кезде қолданушыға белгілі бір элементті жасыруға мүмкіндік береді. Сонымен қатар, спойлер сайтта жақсы көрінеді және парақты қажетсіз жүктейтін бөліктерді жасыруға көмектеседі.
Бұл қажетті
Jquery кітапханасы
Нұсқаулық
1-қадам
Спойлерді Java Script бағдарламалау тілінде жазылған танымал jquery қосылатын модуль кітапханасының көмегімен жүзеге асыруға болады. Ол бағдарламалау тілінің парақтың HTML белгілеу кодымен толық өзара әрекеттесуін жүзеге асыру үшін қолданылады. Jquery қосылымы HTML-ді қолдану арқылы «» тегінің көмегімен жүзеге асырылады. Сіз сценарий орналасқан орынды көрсетіп, оның түрін орнатуыңыз керек: $ (document).ready (function ()
2-қадам
Белгілі бір параграфта көрсетілген мәтін фрагменті бөлек қабатқа - дивқа қосылуы керек, оның көмегімен спойлердің өзі басқарылатын болады: Саша тасжол бойымен жүріп, кептіруді сорып алды.
3-қадам
Одан кейін, сіз барлық дивтардың алдында бүлінген және мәтінді кеңейтетін сәйкес батырмаларды құруыңыз керек. Біріншіден, спойлердің өзі «hide ()» стандартты функциясы арқылы жасырылады: $ (“div [name = 'spoil']”). Hide (); содан кейін барлық спойлерлер үшін мәтін мен сурет жасау керек, батырмалар үшін фон ретінде пайдаланылатын болады: $ (“P [name = 'spoilbutton']”). Html (“Show text”);
4-қадам
Беттегі барлық батырмаларды тауып, батырманың алдындағы бірінші деңгейдің тақырыптарын тексеріңіз. Ол үшін h1 тегтерін аты бойынша іздейтін шарт жасаңыз. Көрсетілген тақырып мәтіні div-ке оралады: $ (“p [name = 'spoilbutton']”) Әрқайсысы (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (бұл).прев (осы).html () +”мәтінді көрсету”; $ (бұл).прев (бұл).replaceWith (“”); $ (бұл).replaceWith (NewSpoilButton);}})
5-қадам
Әрі қарай, тышқанды басу арқылы басу керек. Егер басу анықталса, оны көрсетуге болады: $ (“div [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css (“display”) = = «Блок») {
6-қадам
Содан кейін мұра жазыңыз. Див ішінде мәтін p параграфында орналасқан, оның мазмұны аралық тегке орналастырылған: $ (this).children («p»). Children («span»). Html («Show text»); Collaps ашық спойлер. Егер ол ашық болмаса, мәтінді кеңейтіңіз. Бұл қадам мұрагерлік ережеге негізделген: $ (this).next (this).slideUp («normal»);} else {$ (this).children («p»). Children («span»). Html ($ (This).next (this).slideDown («normal»);} return false; })
7-қадам
Содан кейін батырмаға тышқанды шертудің өзі жазылады, оның көмегімен сценарий спойлерді жасырып, ашады. $ (“P [name = 'spoilbutton']”). (Функцияны () {If ($ (бұл).next (бұл).css (“дисплей”) =”блок”) {$ (бұл).кейін басыңыз (this).slideUp («қалыпты»); $ (бұл).html («Жасыру»);} return false;}); спойлер дайын. Ол сәйкес келетін DIV блогы табылған кезде пайда болады.
