Дополнительная информация на веб-сайтах часто umieszczane w formie podpowiedzi podczas najechania myszką, na przykład w celu odszyfrowania złożonych skrótów lub wyjaśnienia czynności użytkownika. Podobne rozwiązanie front-end nazywa się etykietką. Oszczędza miejsce na stronie, umożliwiając wyświetlanie tylko podstawowych danych, ale pozostawiając czytelnikowi możliwość zapoznania się z dodatkami, jeśli to konieczne. Oprócz funkcji wyłącznie informacyjnej, podpowiedzi mogą być ważnymi elementami projektu, które podkreślają ogólny styl strony i przyciągają uwagę.
Zachowanie się w podpowiedzi
Element, którego interakcja powoduje podpowiedź, nazywa się celem.
Bloki wyskakujące zwykle zawierają ważne informacjeale nie podstawowe informacje. Zakłada się, że użytkownik powinien się z nim zapoznać tylko wtedy, gdy chce. Aby nie denerwować, nie ingerować i nie odwracać uwagi od głównej treści, etykietka musi spełniać szereg wymagań:
- Gładki wygląd.Przypadkowe najechanie kursorem na element docelowy nie powinno spowodować gwałtownego wyskoczenia podpowiedzi. Może to być nadal akceptowalne w przypadku małych pól tekstowych, ale kategorycznie nieodpowiednie, jeśli etykieta narzędzi jest duża lub zawiera obrazy.
- Odpowiednie zakwaterowanie.Okno zachęty nie powinno zakrywać treści, które wyjaśnia, aby użytkownik mógł dopasować dane. W przypadkach, gdy podpowiedź jest głównie dekoracyjna, jest to dopuszczalne.
- Brak wpływu na inne treści.Podpowiedzi mają być małymi, ledwo widocznymi pomocnikami dla użytkownika, więc nie powinny być niewygodne. Prawidłowa podpowiedź nie przesuwa sąsiednich bloków ani nie przesuwa się poza stronę, tworząc paski przewijania.
- Widoczność. Etykietka musi być widoczna w całości, nie może nachodzić na inne elementy ani chować się za krawędzią okna przeglądarki.
- Łatwość zarządzania. Ważne jest, aby użytkownik intuicyjnie rozumiał, jak wywoływać i usuwać podpowiedzi, i nie ma żadnych trudności z tymi działaniami.
Etykietka w czystym HTML
Możliwość tworzenia podpowiedzi leży w samym języku znaczników hipertekstowych na stronach internetowych. Początkowo miał na celu rozszyfrowanie skrótów i złożonych terminów naukowych.
Aby utworzyć taki wyskakujący blok, potrzebujesz atrybutu tytułu, dostępnego dla dowolnego tagu HTML.
<p> Proxima Centauri znajduje się ok4.22 <i title = "9 460 730 472 580 800 metrów"> rok świetlny </i> od Ziemi, która jest 270 tysięcy razy większa od odległości Ziemi od Słońca. </p> <img title = "Zamek Neuschwanstein" src = "/ images / disney.jpg">
Główne zalety podpowiedzi HTML to: łatwość obsługi i możliwość użycia z dowolnymi elementami układu - od tekstu po obrazy. Ale ma też duże wady:
- nie możesz sformatować tekstu;
- zbyt prosty wygląd, którego nie można zmienić;
- niemożność wstawienia obrazów.
Atrybut tytułu HTML nadaje się tylko do małych porad, które nie wymagają specjalnego stylu. W przeciwnym razie warto wiedzieć, jak tworzyć podpowiedzi za pomocą CSS.
Etykietka CSS
Możesz stworzyć piękny, niestandardowy blok wskazówek, używając kaskadowych arkuszy stylów. Wykorzystuje podstawowe koncepcje CSS:
- pozycjonowanie absolutne - do wyciągania wskazówek z ogólnego przepływu dokumentu;
- całkowite ukrycie bloku w stanie nieaktywnym za pomocą właściwości
pokaz; - pseudoklasa
: unosić się, który jest przypisany do dowolnego elementu znajdującego się pod kursorem myszy; - pseudoelementy
: przedi: poktóre mogą być używane do prostych podpowiedzi, aby nie tworzyć oddzielnego elementu HTML; - animacja i zanikanie dla pięknych efektów pojawiania się i zanikania.
Wszystkie te właściwości są dobrze obsługiwane przez nowoczesne przeglądarki, co sprawia, że mechanizm podpowiedzi jest niezawodny.
Pseudoklasa : unosić sięoprócz najechania kursorem reaguje również na dotyk palca po ekranie dotykowym, co umożliwia obsługę gadżetów mobilnych.
Blok lub pseudoelement
Etykietka CSS może być oddzielnym blokiem HTML z własną strukturą lub pseudoelementem innego bloku. Każda z tych opcji ma zalety i wady do rozważenia.
Dużo łatwiej jest manipulować zawartością w oddzielnym pojemniku. Możesz w nim umieszczać obrazy, nagłówki i inne elementy.
Pseudoelement pozwala pozbyć się niepotrzebnych elementówbloki i sprawiają, że układ jest trochę łatwiejszy. Treść tekstową można umieścić w atrybucie elementu docelowego i nie martwić się o tworzenie samej podpowiedzi, wszystko zostanie zrobione przez CSS. Jednak pseudoelement jest słabo dopasowany do bloku o złożonej strukturze. Można go również utworzyć tylko do zamykania tagów. Nie możesz dołączyć takiej wskazówki bezpośrednio do zdjęcia.
Tworzenie wyskakującego bloku CSS
Stwórzmy ładnie zaprojektowaną podpowiedź ze złożoną strukturą dla najbliższej gwiazdy z konstelacji Centaura.
Przede wszystkim zdefiniujmy znaczniki HTML:
<h2> Gwiazdy konstelacji Centaura </h2> <ulclass = "stars"> <li class = "star"> Alpha Centauri </li> <li class = "star"> Beta Centauri </li> <li class = "star"> Theta Centauri </li> <li class = "star"> Gamma Centauri </li> <li class = "star"> Epsilon Centauri </li> <li class = "star"> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (z łaciny proxima - najbliższa) to czerwony karzeł należący do układu gwiezdnego Alpha Centauri, najbliższej Ziemi po Słońcu gwiazdy. </div> </li> </ul>Stylizujmy i ukryjmy blok podpowiedzi za pomocą CSS:
.star { pozycja:krewny; } / * style podpowiedzi * / .star .tooltip { Nie wyświetla się; pozycja: bezwzględna; góra: 50%; transform: translateY (-50%); lewy: 100%; } / * style ozdobnego trójkąta * / .star .tooltip: przed {...} / * wyskakująca podpowiedź po najechaniu kursorem * / .star: hover .tooltip {display: block; }
Style listy i samej podpowiedzi mogą być dowolne, są one pomijane dla zwięzłości.
Umieszczenie podpowiedzi w oddzielnym bloku umożliwia użycie w niej obrazów, formatowanie tekstu, a nawet tworzenie pseudoelementów w celu uzyskania pięknego projektu.
Etykietka w pseudo elemencie
Zademonstruj tworzenie podpowiedziw pseudo elemencie pomoże panel edytora graficznego. Każde narzędzie przedstawione jest w postaci ikony, której przeznaczenie może być niezrozumiałe dla niedoświadczonego użytkownika. Aby nikt nie wyszedł niezadowolony, do ikon należy dodać podpowiedzi z nazwami.
Kod HTML panelu będzie wyglądał następująco:
<div class = "instruments"> <div class = "instrument"data-tooltip = "Pędzel"> <img src = "/ images / brush-icon.svg"> </div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </div> <div class = "instrument" data-tooltip = "Powiększ"> <img src = "/ images / zoom-in-icon.svg"> </div> <div class = "instrument" data-tooltip = "Pomniejsz"> <img src = "/ images / zoom-out-icon.svg"> </div> </div>W atrybucie umieszczana jest unikalna nazwa instrumentu data-tooltip... Wewnątrz bloku znajduje się ikona, ale w kodzie HTML brakuje samej podpowiedzi.
Ponieważ podpowiedź będzie zawierała tylko krótki tekst objaśniający, możesz użyć pseudoelementów, aby uniknąć zaśmiecania panelu świetlnego.
/ * ogólne style ikony * / ...instrument { pozycja: względna; kolor: # 666; tło: białe; kursor: wskaźnik; } / * style ikony po najechaniu * / .instrument: hover { tło: # 666; kolor biały; } / * style podpowiedzi * / .instrument: hover: after { content: attr (data-tooltip); pozycja: bezwzględna; lewy: 100%; kolor: # 666; }Pseudoelement pojawia się tylko po najechaniu kursorem, więc nie ma potrzeby ukrywania go za pomocą display: block. O jego lokalizacji decydują właściwości pozycja i lewa / prawa / góra / dół... Aby uzyskać z atrybutu data-tooltip docelowy element treści podpowiedzi CSS zapewnia funkcję attr ()... Ze względu na zwięzłość pominięto style dekoracyjne.
Wskazówka pojawiająca się po kliknięciu bez skryptów
Omówione wcześniej mechanizmy podpowiedzi reagowały na najechanie kursorem myszy na element docelowy i były oparte na pseudoklasie CSS : unosić się... W niektórych sytuacjach lepiej jest otworzyć podpowiedź po kliknięciu. Ten efekt jest łatwy do zaimplementowania w JavaScript, ale CSS może załatwić sprawę.
Wśród listy pseudoklas CSS znajduje się wspaniała klasa : skupiaćdostępne dla linków i elementów wejściowych. w odróżnieniu : unosić sięktóry znika, gdy tylko kursor opuścimouse, ta pseudoklasa pozwala na zapisanie aktywnego stanu elementu docelowego. A jeśli pola wejściowe nie są semantycznie odpowiednie do tworzenia podpowiedzi, linki są w porządku.
Zastąpmy element listy z pierwszego przykładu linkiem:
<a class = "star" href = "javascript:void (0) "> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (z łaciny proxima - najbliższa) to czerwony karzeł należący do układu gwiezdnego Alpha Centauri, najbliższej Ziemi po Słońcu gwiazdy. </div> </a>
Atrybut href ze znaczeniem javascript: void (0) jest konieczne, aby uniemożliwić jakąkolwiek reakcję przeglądarki na kliknięcie linku.
Poniższe style umożliwiają wywołanie podpowiedzi z opisem gwiazdki po kliknięciu:
.star .tooltip { Nie wyświetla się; } .star: focus .tooltip { Blok wyświetlacza; }Łącze pozostanie aktywne, dopóki użytkownik nie kliknie w dowolnym miejscu strony.
Tak więc podpowiedź w witrynie można utworzyć na wiele różnych sposobów, nawet bez użycia JavaScript. Każdy z nich jest dobry, wystarczy wybrać najbardziej odpowiedni do konkretnej sytuacji.
