Komunikaty / Popovers

644 0

W tym wpisie przedstawię Wam komunikaty, które możemy wyświetlać po kliknięciu na przykład w button.

We wpisie o wprowadzeniu do Bootstrap możecie zauważyć, że prócz arkusza ze stylami Bootstrapa pobieramy też kilka plików JS. Są one niezbędne do działania niektórych elementów Bootstrapa. O jednym z nich właśnie piszę:).

Zaczniemy od tego, że ów element nie działa „z automatu” a musimy go aktywować za pomocą kilku linijek JSa. Najlepiej umieścić je tylko na podstronie na której będzie korzystać z popoverów.

Podstawowy przykład

W poniższym przykładzie uruchomimy sobie nasz popover z pomocą przycisku oraz kilku jego atrybutów. Przyciski zostały już omówione w tym wpisie, więc je pominę. Skupimy się na dodanych atrybutach. Tak więc atrybut data-toggle="popover" mówi JSowi, że te element będzie zawierał komunikat. Atrybut title="tekst" odpowiada za tytuł popovera. Natomiast do atrybutu data-content="Lorem ipsum" wpisujemy treść naszego okna z komunikatem.

Przykład

Kod

Kierunek popovera

W poprzednim przykładzie stworzyliśmy komunikat, ale pojawia się on po prawej stronie. Nie zawsze będzie to pożądane, gdyż nie zawsze będziemy mieli tam miejsce. Lub po prostu nasz projekt zakłada by pojawiał się on np z góry. Stronę na której ma się pojawiać popover definiujemy parametrem data-placement="*" i wartościami top, right, bottom, left w zależności od tego, gdzie chcemy go wyświetlić.

Przykład

Kod

Ukrywanie popovera

Jak zauważyliście w poprzednich przykładach, ukrycie popovera jest możliwe tylko za pomocą kliknięcia w przycisk. W tym przykładzie pokażę jak ukrywać go kliknięciem gdziekolwiek, poza przyciskiem. Przede wszystkim teraz musimy skorzystać ze znacznika <a> zamiast <button>. Musimy dodać klasę .popover-dismiss ( może być inna, byle taka sama była w kodzie JS poniżej ) także parametr tabindex="0", parametr role="button" oraz parametr data-trigger="focus". Dodatkowo musimy rozbudować nasz kod JS by wyglądał następująco:

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (2 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*