autor: Robert
Nieraz spotykamy się z sytuacją gdy w tekście zamieszczamy linki ale użytkownikowi nie do końca mówią one do czego służą. Fajnym rozwiązaniem jest wyświetlenie małego dymka, który podpowie co dokładnie kryje się pod odnośnikiem aby osoba przeglądająca naszą stronę dokładnie wiedziała w co klika.
Aby wyświetlić owe dymki musimy, prócz dopisania klasy do elementu, użyć także kilka linijek JSa. Nie będę opisywał wszystkich możliwych parametrów, które można przekazać do dymka gdyż osoby mniej biegłe mogą się w tym pogubić. Osoby bardziej biegłe bez problemu skorzystają z nich po przeczytaniu oficjalnej dokumentacji.
W podstawowym przykładzie pokażę jak dodać dymki do zwykłych linków za pomocą data-atrybut. Tym sposobem możemy indywidualnie modyfikować wszystkie elementy posiadające tą samą klasę.
Pierwszą rzeczą, którą musimy wiedzieć są odpowiednie parametry w samym kodzie HTML naszego linka. Są to:
href="http://example.com"
, standardowy kod odnośnika do stronydata-placement="pozycja"
, gdzie „pozycja” może przyjmować wartości: top, right, bottom, leftdata-toggle="tooltip"
, tutaj kod nie ulega zmianie, mówi on, że link będzie dymkiem.class="tooltip"
, jest to nazwa klasy, którą użyjemy w kodzie JS do wywołania naszego dymka (wszystkie elementy mają tą samą klasę a dymki będą się wyświetlały w różnych pozycjach.data-original-title="Tekst"
, gdzie Tekst to wyrazy, które chcemy umieścić w dymkuPoniżej kod po kolei linków z podpowiedziami: u góry, z prawej, z dołu, z lewej
Kolejnym elementem, który musimy wykonać jest umieszczenie kodu JS na naszej stronie internetowej. Można to wykonać na 2 sposoby, albo wewnątrz dokumentu albo zaimportować plik *.js z serwera. Więcej informacji o zamieszczaniu skryptów JS znajduje się TUTAJ
W kodzie JS mamy następujące elementy:
$(document).ready(function(){ kod });
, odpowiada za uruchomienie naszego kodu dopiero po wczytaniu całej strony WWW. (JQuery operuje na elementach naszej strony, jeśli nie wszystkie się wczytają zanim uruchomi się skrypt, nie będzie on działał prawidłowo)$(".tooltip")
, jest to odwołanie się do naszej klasytooltip();
, jest to metoda odpowiadająca za dymek do której są przekazywane parametry z data-atrybutPodpowiedź u góry
Podpowiedź z prawej
Podpowiedź od spodu
Podpowiedź po lewej
Pierwszą rzeczą, którą musimy wiedzieć są odpowiednie parametry w samym kodzie HTML naszego linka. Są to:
href="http://example.com"
, standardowy kod odnośnika do stronydata-toggle="tooltip"
, tutaj kod nie ulega zmianie, mówi on, że link będzie dymkiem.class="nazwa-klasy"
, jest to nazwa klasy, którą użyjemy w kodzie JS do wywołania naszego dymka. (indywidualna klasa dla indywidualnego kierunku dymka)data-original-title="Tekst"
, gdzie Tekst to wyrazy, które chcemy umieścić w dymkuKolejnym elementem, który musimy wykonać jest umieszczenie kodu JS na naszej stronie internetowej.
W kodzie JS mamy następujące elementy:
$(document).ready(function(){ kod });
, odpowiada za uruchomienie naszego kodu dopiero po wczytaniu całej strony WWW. (JQuery operuje na elementach naszej strony, jeśli nie wszystkie się wczytają zanim uruchomi się skrypt, nie będzie on działał prawidłowo)$(".tip-top")
, jest to odwołanie się do naszej klasy (w tym przypadku do klasy odpowiadającej za wyświetlanie dymka u góry)tooltip({ parametry });
, jest to metoda odpowiadająca za dymek do której przekazujemy odpowiednie parametryplacement : 'top'
, jest to parametr przekazywany do metody, który powoduje wyświetlenie dymka u góryPowyższe metody różnią się tym, że w pierwszej każdy element musi mieć podany atrybut data-placement
i może on wskazywać inny kierunek ale wszystkie elementy mogą mieć taką samą klasę.
W drugim przykładzie kod dotyczy elementów, które posiadają jedną i zdefiniowaną w kodzie JS klasę i nie zadziałają na pozostałe, więc wszystkie elementy tej samej klasy będą miały dymki z tej samej strony. Dodatkowo nie mają zdefiniowanego parametru data-placement
Prócz zwykłych linków, dymki możemy zastosować także do przycisków. Zasada tutaj jest identyczna i możemy korzystać zarówno z data-placement jak i z ustalania pozycji w kodzie JS.
Oraz kod JS
Czy można zrobić taki przycisk, który po wskazaniu myszką wyświetlałby dymek, a po kliknięciu – okienko modalne? Jeśli tak to w jaki sposób?
I jeszcze taka mała uwaga: w pierwszym kodzie pomylone są ostatnie 2 komentarze, radziłbym to poprawić ;)
Tak, próbowałem. Do przycisku, który wcześniej tylko wyświetlał okienko dopisałem kod podpowiedzi i teraz działa tylko podpowiedź :P Po kliknięciu nic się nie dzieje.
Jak w ogóle wpisać 2 różne wartości do atrybutu data-toggle? Próbowałem oddzielić je spacją, później też przecinkiem, zmieniłem kolejność, ale efekt taki sam – działa tylko podpowiedź. Proszę o jakąś wskazówkę :P
Zadziałało, dziękuję :)
Oczywiście, że można:) Tutaj masz przykład: http://jsfiddle.net/technotarek/2htze/
Odpowiedz