Dynamiczny HTML (DHTML) umożliwia tworzenie aplikacji w stylu aplikacji na Twoich stronach internetowych, zmniejszając częstotliwość, z jaką całe strony muszą być w pełni ładowane. W aplikacjach, gdy coś klikniesz, aplikacja natychmiast się zmieni, aby pokazać konkretną treść lub udzielić odpowiedzi.
W przeciwieństwie do tego, strony internetowe zazwyczaj muszą zostać ponownie załadowane lub musi zostać załadowana całkowicie nowa strona. Może to sprawić, że wrażenia użytkownika będą bardziej chaotyczne. Twoi klienci muszą poczekać na załadowanie pierwszej strony, a następnie ponownie na załadowanie drugiej strony i tak dalej.
Używanie w celu poprawy wrażenia widza
Jednym z najłatwiejszych sposobów na poprawę tego doświadczenia przy użyciu DHTML jest posiadanie div elementy włączają się i wyłączają, aby wyświetlić zawartość, gdy jest ona wymagana. ZA element div definiuje logiczne podziały na Twojej stronie. Pomyśl o div jako o pudełku, które może zawierać akapity, nagłówki, linki, obrazy, a nawet inne div.
Co będziesz potrzebował
Aby utworzyć element div, który można włączać i wyłączać, potrzebne są:
- Link do sterowania div poprzez włączanie i wyłączanie po kliknięciu.
- Div do pokazania i ukrycia.
- CSS aby wystylizować div ukryty lub widoczny.
- JavaScript do wykonania akcji.
Ogniwo kontrolne
Łącze kontrolne jest najłatwiejszą częścią. Po prostu utwórz link, tak jak do innej strony. Na razie zostaw atrybut href pusty.
Naucz się HTML
Umieść to w dowolnym miejscu na swojej stronie internetowej.
Div do pokazania i ukrycia
Utwórz element div, który chcesz pokazać i ukryć. Upewnij się, że Twój div ma unikalny identyfikator. W tym przykładzie unikalny identyfikator to uczyć się HTML.
To jest kolumna treści. Zaczyna się pusta, z wyjątkiem tego tekstu wyjaśnienia. Wybierz, czego chcesz się nauczyć w kolumnie nawigacyjnej po lewej stronie. Tekst pojawi się poniżej:
Naucz się HTML
- Darmowa klasa HTML
- Samouczek HTML
- Co to jest XHTML?
CSS do pokazywania i ukrywania Div
Utwórz dwie klasy dla swojego CSS: jedną, aby ukryć div, a drugą, aby go pokazać. Masz do tego dwie opcje: wyświetlanie i widoczność.
Wyświetlanie usuwa element div z przepływu stron, a widoczność zmienia tylko sposób jego postrzegania. Niektórzy programiści wolą pokaz, ale czasami widoczność ma też sens. Na przykład:
.ukryty { wyświetlacz: brak; }
.unhidden { wyświetlacz: blok; }
Jeśli chcesz używać widoczności, zmień te klasy na:
.ukryty { widoczność: ukryty; }
.unhidden { widoczność: widoczny; }
Dodaj ukrytą klasę do div, aby zaczynała się jako ukryta na stronie:
JavaScript, aby to działało
Wszystko, co robi ten skrypt, to przeglądanie bieżącej klasy ustawionej w div i przełączanie jej na nieukrytą, jeśli jest oznaczona jako ukryta lub odwrotnie.
To tylko kilka linijek JavaScriptu. Umieść następujące w głowie swojego Dokument HTML (zanim.
Co robi ten skrypt, wiersz po wierszu:
Wywołuje funkcję odkryj, i divID to dokładny unikalny identyfikator, który chcesz pokazać lub ukryć.
Ustawia zmienną item z wartością twojego div.
Wykonuje proste sprawdzenie przeglądarki; jeśli przeglądarka nie obsługuje getElementById, ten skrypt nie zadziała.
Sprawdza klasę w div. Jeżeli to jest ukryty, zmienia to na nieukryty. W przeciwnym razie zmienia to na ukryty.
Zamyka gdyby komunikat.
Zamyka funkcję.
Aby skrypt działał, musisz zrobić jeszcze jedną rzecz. Wróć do swojego linku i dodaj javascript do atrybutu href. Pamiętaj, aby użyć dokładnego unikalnego identyfikatora, który nadałeś swojemu div w tym href:
Naucz się HTML
Gratulacje! Masz teraz div, który będzie się wyświetlał i ukrywał za każdym razem, gdy klikniesz na link.
Możliwe problemy, na które należy uważać
Ten skrypt nie jest niezawodny. Istnieje kilka sytuacji, w których może to spowodować problemy:
JavaScript nie jest włączony. Jeśli Twoi czytelnicy nie mają JavaScript lub jest on wyłączony, ten skrypt nie będzie działać. Ukryte elementy div pozostają ukryte bez względu na to, co robią Twoi czytelnicy. Jednym ze sposobów na naprawienie tego jest umieszczenie ukrytych divów w obszarze noscript, ale będziesz musiał się z tym pobawić, aby wyświetlić je poprawnie.
Za dużo treści. Może to być świetne narzędzie, które pozwoli czytelnikom zobaczyć tylko te treści, których potrzebują, ale jeśli umieścisz zbyt dużo w ukrytych elementach div, może to drastycznie wpłynąć na ładowanie strony. Pamiętaj, że nawet jeśli zawartość się nie wyświetla, przeglądarka nadal ją pobiera, więc rozważ, ile treści ukrywasz.
Klienci nie rozumieją. Wreszcie klienci mogą nie być przyzwyczajeni do klikania linków, które pokazują lub ukrywają treść. Pobaw się ikonami (dobrze działają znaki plus i strzałki) lub tekstem, aby wyjaśnić, co stanie się z Twoimi klientami. Innym rozwiązaniem jest pozostawienie otwartego jednego z divów, podczas gdy pozostałe są zamknięte. Może to przekazać pomysł Twoim klientom, aby mogli szybciej dowiedzieć się, jak otworzyć pozostałą zawartość.
Powinieneś zawsze testować dynamiczny HTML w ten sposób z klientami. Gdy będziesz mieć pewność, że potrafią go zrozumieć i używać, może to być świetny sposób na umieszczenie dużej ilości treści na swoich stronach internetowych bez zajmowania dużej ilości widocznego miejsca.