Spoiler to wygodne narzędzie dla strony. Jest szeroko stosowany na różnych forach i blogach, pozwalając użytkownikowi ukryć określony element w momencie naciśnięcia przycisku. Co więcej, spoiler dobrze wygląda na stronie i pomaga ukryć te części, które niepotrzebnie przeciążają stronę.
Czy to jest to konieczne
Biblioteka JQuery
Instrukcje
Krok 1
Spoiler można zaimplementować za pomocą popularnej biblioteki wtyczek jquery napisanej w języku programowania Java Script. Służy do implementacji pełnej interakcji języka programowania z kodem znaczników HTML strony Połączenie jquery odbywa się za pomocą HTML za pomocą znacznika . Musisz określić lokalizację, w której znajduje się skrypt i ustawić jego typ: $ (dokument).ready (funkcja ()
Krok 2
Fragment tekstu określony w określonym akapicie musi być zamknięty w osobnej warstwie - div, za pomocą którego będzie kontrolowany sam spoiler: Sasha szedł autostradą i ssał suszenie.
Krok 3
Następnie musisz utworzyć przed wszystkimi divami o nazwie spoil odpowiednie przyciski, które zwijają i rozwijają tekst. Najpierw ukrywa się sam spoiler za pomocą standardowej funkcji „ukryj ()”: $ („div [nazwa = 'spoil']”). Ukryj (); Następnie musisz utworzyć tekst i obraz dla wszystkich spoilerów, który będzie używany jako tło dla przycisków: $ („P [nazwa = 'spoilbutton']”) Html („Pokaż tekst”);
Krok 4
Znajdź wszystkie przyciski na stronie i sprawdź nagłówki pierwszego poziomu przed przyciskiem. Aby to zrobić, utwórz warunek, który będzie wyszukiwał tagi h1 według nazwy. Określony tekst tytułu zawija się w sam div: $ („p [name = 'spoilbutton']”). Each (function () {If ($ (this).prev (this).get (0).tagName == „H1”) {Var NewSpoilButton =„”+ $ (this).prev (this).html() +” Show text”; $ (this).prev (this).replaceWith („”); $ (this).replaceWith (NewSpoilButton);}})
Krok 5
Następnie musisz obsłużyć kliknięcie przycisku myszy za pomocą kliknięcia. W przypadku wykrycia kliknięcia można je wyświetlić: $ („div [nazwa = 'spoilbutton']”) Kliknij (function () {If ($ (to).next (this).css („display”) = =” blok”) {
Krok 6
Następnie napisz dziedziczenie. Wewnątrz elementu div tekst znajduje się w akapicie p, którego zawartość jest umieszczona w tagu span: $ (this).children („p”) Children („span”) Html („Pokaż tekst”); Zwiń otwarty spoiler. Jeśli nie jest otwarty, rozwiń tekst. Ten krok opiera się na zasadzie dziedziczenia: $ (this).next (this).slideUp („normal”);} else {$ (this).children („p”) Children („span”). Html („ Ukryj tekst”); $ (to).next (to).slideDown („normalne”);} return false; })
Krok 7
Następnie rejestrowane jest samo kliknięcie myszką w przycisk, za pomocą którego skrypt ukryje i rozwinie spoiler. $ („P [nazwa = 'spoilbutton']”) Kliknij (funkcja () {If ($ (to).next (this).css („display”) =”block”) {$ (this).next (this).slideUp („normalny”); $ (this).html („Ukryj”);} return false;}); Spoiler gotowy. Pojawi się, gdy zostanie znaleziony pasujący blok DIV.
