Спойлер сайт үчүн ыңгайлуу курал болуп саналат. Ал ар кандай форумдарда жана блогдордо кеңири колдонулуп, колдонуучу баскычты басканда белгилүү бир элементти жашырууга мүмкүнчүлүк берет. Анын үстүнө, спойлер сайтта жакшы көрүнөт жана баракчаны ашыкча жүктөгөн бөлүктөрдү жашырууга жардам берет.
Ал зарыл
Jquery китепканасы
Нускамалар
1 кадам
Спойлерди Java Script программалоо тилинде жазылган популярдуу jquery плагин китепканасы аркылуу ишке ашырса болот. Ал программалоо тилинин беттин HTML белгилөө коду менен толук өз ара аракетин жүзөгө ашыруу үчүн колдонулат. Jquery байланышы HTML белгилерин колдонуп ишке ашырылат. Сиз скрипт жайгашкан жерди көрсөтүп, анын түрүн коюңуз: $ (document).ready (function ()
2-кадам
Белгилүү бир абзацта көрсөтүлгөн тексттик фрагмент өзүнчө катмарга - дивга камтылышы керек, анын жардамы менен спойлер өзү башкарылат: Саша чоң жолду басып өтүп, кургатып жатты.
3-кадам
Андан кийин, бардык дивдердин алдында текстти кыйратып, кеңейте турган бузулган тиешелүү баскычтарды түзүшүңүз керек. Биринчиден, спойлердин өзү стандарттуу "hide ()" функциясын колдонуп жашырылган: $ (“div [name = 'spoil']”). Hide (); Андан кийин, бардык спойлерлер үчүн текст жана сүрөт түзүү керек, баскычтар үчүн фон катары колдонула турган: $ (“P [name = 'spoilbutton']”). Html (“Текстти көрсөтүү”);
4-кадам
Барактагы бардык баскычтарды таап, баскычтын алдындагы биринчи деңгээлдин аталыштарын текшериңиз. Ал үчүн h1 тегдерин аты боюнча издей турган шарт түзүңүз. Көрсөтүлгөн аталыштагы текст дивдин өзүнө оролот: $ (“p [name = 'spoilbutton']"). Ар бири (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-кадам
Андан кийин, чычкан баскычын чыкылдатуу менен басуу керек. Эгерде чыкылдатуу аныкталса, анда аны көрсөтсө болот: $ (“div [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display") =) = "Блок") {
6-кадам
Андан кийин мурас жаз. Бөлмөнүн ичинде текст p абзацында жайгаштырылган, анын мазмуну бирдиктүү тегде жайгаштырылган: $ (this). Children ("p"). Children ("span"). Html ("Show text"); Collapse ачык спойлер. Эгерде ал ачык эмес болсо, анда текстти кеңейтиңиз. Бул кадам мурас эрежесине негизделген: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ($ (This).next (this).slideDown ("normal");} return false; })
7-кадам
Андан кийин баскычтагы чычканды чыкылдатуу жазылат, анын жардамы менен скрипт спойлерди жашырат жана ачат. $ (“P [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normal"); $ (this).html ("Hide");} return false;}); Spoiler даяр. Дал келген DIV блогу табылганда пайда болот.
