Bootstrap tutorial logo

Okienka z podpowiedziami / Popover

autor: Robert

16 października 2014

Podobnie jak w przypadku podpowiedzi do linków, czasami chcemy pod jakimś linkiem wyświetlić użytkownikowi informację. Tym razem dłuższa, którą na przykład może być wyjaśnienie jakiegoś pojęcia bez konieczności przechodzenia na inną podstronę. Dzięki czemu nasz czytelnik nie musi się odrywać od całego tekstu tylko dostanie wyjaśnienie w postaci chmurki. Tutaj również musimy skorzystać z odrobiny jQuery i znów nie będę tłumaczył wszystkich opcji bo zaawansowani użytkownicy sobie z nimi poradzą a mniej zaawansowani niedługo dołączą do tych pierwszych:) Dłuższe podpowiedzi, podobnie jak w przypadku dymków możemy dołączyć do buttonów oraz linków. Okienko z podpowiedzią może mieć swój tytuł + tekst, bądź zawierać jedynie tekst. Z racji, że jest to właściwie modyfikacja dymków, tu również możemy operować na data-atrybut oraz na parametrach w kodzie JS.

Podstawowy przykład

Pierwszy przykład pokazuje 4 przyciski w których użyjemy data-atrybut do wyświetlenia podpowiedzi oraz 2 z tych okienek będą miały tytuł
Opis tego co zawiera powyższy kod HTML
  • Każdemu elementowi nadajemy tą samą klasę (w tym przypadku popover-btn)
  • data-container="body", żeby nie mieszać, ten kod wpisujemy bez zmian
  • data-toggle="popover", podobnie jak w przypadku dymków, informujemy, że będziemy używać podpowiedzi
  • data-placement="pozycja", tutaj "pozycja" może przyjąć wartości top|left|bottom|right
  • data-content="tekst", gdzie "tekst" zastępujemy tym co chcemy umieścić w okienku podpowiedzi
  • title="tytuł", gdzie "tytuł" zastępujemy własnym tekstem
Jak wspomniałem wcześniej, musimy teraz użyć jQuery aby "uruchomić" nasze podpowiedzi.
Opis powyższego kodu JS:
  • $(document).ready(function(){ ... });, zapewnia nam wczytanie skryptu dopiero po załadowaniu całej strony WWW.
  • $('.popover-btn'), odwołanie się do klasy CSS, którą nadaliśmy przyciskom
  • .popover();, metoda odpowiadająca za wyświetlanie podpowiedzi








Przykład z użyciem paramertów w JS

Drugi przykład pokazuje 4 linki w których użyjemy parametrów w kodzie JS do wyświetlenia podpowiedzi oraz 2 z tych okienek będą miały tytuł
Opis powyższego kodu HTML:
  • class="popover-link-left", nadajemy naszemu linkowi klasę, która mówi nam w tym przypadku, że podpowiedź pojawi się z lewej
  • data-container="body", ten element pozostawiamy bez zmian
  • data-toggle="popover", informujemy, że będziemy używać podpowiedzi
  • data-content="tekst", gdzie "tekst" zamieniamy na własną zawartość okienka
  • title="tytuł", tutaj "tytuł" zamieniamy na własny tekst, który pojawi się na górze okienka
Kod JS jest w tym przypadku trochę bardziej skomplikowany ale bardzo czytelny:
Powyższy kod JS zawiera:
  • $(document).ready(function(){ ... });, zapewnia nam wczytanie skryptu dopiero po załadowaniu całej strony WWW.
  • jQuery(".popover-link-top"), odwołujemy się do linka z konkretną klasą
  • .popover({ ... });, wywołujemy klasę odpowiedzialną za okienka podpowiedzi
  • placement : 'top', jest to parametr klasy, ten odpowiada, za wyświetlanie podpowiedzi u góry
Link z podpowiedzią po lewej Link z podpowiedzią u góry Link z podpowiedzią na dole + tytuł Link z podpowiedzią z prawej + tytuł

Wyłączenie okienka poprzez kliknięcie obok

Jak pewnie zauważyliście wyżej, wyłączyć podpowiedź można jedynie poprzez kliknięcie ponownie w przycisk/link i można otworzyć je wszystkie na raz. Jesteśmy przyzwyczajeni do wyłączania okienek poprzez klikanie obok nich (jak np wiele galerii w internecie), zwykle też kliknięcie w jakiś element powoduje zniknięcie innego. Możemy uzyskać taki efekt bardzo łatwo. Wystarczy do naszego kodu przycisku lub linka dodać kolejny atrybut data-trigger="focus"



Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (4 głosów, średnia: 5,00 na 5)
Loading...

Mister Klikacz 9 grudnia 2014 o 21:43

Czy będą jeszcze pojawiały się jakieś nowe wpisy na Pana kursie Bootstrapa?

Odpowiedz
    Robert 10 grudnia 2014 o 09:12

    Na daną chwilę opisałem znakomitą większość dokumentacji Bootstrapa. Chodzą plotki o Bootstrap 4 więc stwierdziłem, że obecnie skupię się na tworzeniu tutoriala o WordPress a po premierze BS4 stworzę dla niego dokumentację.

    Odpowiedz
Bartek 12 maja 2015 o 09:11

Robercie chciałbym Ci bardzo podziękować za ten kurs. Dzięki niemu można samodzielnie poznać framework i w pełni korzystać z jego możliwości. Kurs stał się doskonałym narzędziem, myślę niejednego programisty!
Czy informacje o pojawieniu się wersji 4 są nadal aktualne?

Odpowiedz
    Robert 12 maja 2015 o 09:28

    Informacje o pojawieniu się wersji 4 wziąłem z oficjalnego bloga Bootstrapa -> http://blog.getbootstrap.com/. Pracują oni nad wersją Alpha, więc myślę, że nie długo pojawi się BS4 i będę mógł stworzyć jego dokumentację:)

    Odpowiedz
      Marcin 26 sierpnia 2015 o 18:41

      Robercie, możemy liczyć na wpis w którym w skrócie opisałbyś co najważniejszego się zmienia w BS4? Wiesz taki „changelog” jak zrobiłeś to z wpisem „Różnice Bootstrap 2.x / 3.0”?

      Odpowiedz
        Robert 27 sierpnia 2015 o 08:05

        Bootstrap 4 jest jeszcze w wersji Alpha więc bardzo wczesnej i chciałem poczekać, ale może faktycznie zrobię tak, że napiszę o różnicach a będę go później rozbudowywał:)

        Odpowiedz
Paweł 10 czerwca 2015 o 09:14

Najlepszy polskojęzyczny kurs Bootstrapa z jakim się spotkałem. Świetny, przystępnie napisany, same konkrety. Wielkie brawa dla autora i podziękowania ! (książki Helionu „się umywają”), Z niecierpliwością czekam na dalsze wpisy (nie tylko na temat Bootstrapa).

Odpowiedz