Спойлерът е удобен инструмент за сайта. Той се използва широко в различни форуми и блогове, позволявайки на потребителя да скрие определен елемент по време на натискане на бутон. Освен това спойлерът изглежда добре на сайта и помага да се скрият онези части, които излишно претоварват страницата.
Необходимо е
Jquery библиотека
Инструкции
Етап 1
Спойлерът може да бъде реализиран с помощта на популярната библиотека за приставки jquery, написана на езика за програмиране Java Script. Използва се за осъществяване на пълно взаимодействие на езика за програмиране с HTML кода за маркиране на страницата. Jquery връзката се извършва с помощта на HTML с помощта на тага. Трябва да посочите местоположението, където се намира скриптът, и да зададете неговия тип: $ (document).ready (function ()
Стъпка 2
Текстовият фрагмент, посочен в определен абзац, трябва да бъде затворен в отделен слой - div, с помощта на който ще се контролира самият спойлер: Саша вървеше по магистралата и смучеше сушене.
Стъпка 3
След това трябва да създадете пред всички div, наречени разваляне, съответстващи бутони, които ще свият и разширят текста. Първо, самият спойлер е скрит с помощта на стандартната функция "hide ()": $ (“div [name = 'spoil']”). Hide (); След това трябва да създадете текст и изображение за всички спойлери, което ще се използва като фон за бутоните: $ (“P [name = 'spoilbutton']”). Html („Показване на текст“);
Стъпка 4
Намерете всички бутони на страницата и проверете за заглавия от първо ниво пред бутона. За да направите това, създайте условие, което ще търси маркери h1 по име. Посоченият заглавен текст се увива в самия div: $ (“p [name = 'spoilbutton']”). Всеки (функция () {Ако ($ (това).prev (това).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
След това напишете наследство. В рамките на div текстът е в абзац 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;}); Спойлер готов. Той ще се появи, когато бъде намерен съвпадащ DIV блок.
