#57. JavaScript – Taby

Taby – tworzenie

Czasami chciałbyś dodać treść na stronie i zmieniać jej treść bez przeładowania strony? Do tego służą taby – zakładki, dzięki którym w prosty sposób będziesz mógł dotrzeć z materiałem do czytelnika.

Framework Bootstrap umożliwia dodanie tabów. Wystarczy, że dodasz nieuporządkowaną listę ul wraz z odpowiednimi atrybutami do elementów a, które są zagnieżdzone w elementach listy (po jednym do każdego li).

Kolejno należy ustawić odpowiednie ścieżki odnośników do identyfikatorów tabów. Treść w zakładce tworzona jest poprzez elementy div z klasami pomocniczymi określonymi przez Bootstrap.

Przykładowym zastosowaniem tabów jest opis umiejętności czy najważniejszych informacji o autorze strony.

Poniżej spójrz na przykład z zastosowaniem tabów:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

wizardly-framework-4v3fh

wizardly-framework-4v3fh danielminschinski

Wizualny Fade

W powyższym przykładzie zobaczyliście jak dodać taby na stronę internetową. Teraz zrobimy tak, aby treść zmieniała się “ładniej”.

Aby tak się stało, należy do elementów z klasą tab-pane dodać nową klasę pomocniczą fade. Tym sposobem tekst płynnie się zmienia. Należy pamiętać, że do pierwszego elementu z klasą tab-pane oprócz wymienionej klasy należy dodać jeszcze klasę in, która pokaże początkowy tekst.

Poniżej zobaczysz przykład taki sam jak ostatnio – tylko z jedną różnicą (wizualną). Efekt “fade” to tylko upiększenie strony – żadnych funkcjonalnych zmian ona nie wprowadza.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

affectionate-franklin-6tnwg

affectionate-franklin-6tnwg danielminschinski

A więc jak – taby nie takie trudne? Ciekawy i przydatny sposób prezentowania dynamicznego tekstu. Każda strona z tzn. “pomysłem” może zawierać elementy tab.

W kolejną środę zobaczysz jak dodać na stronę internetową tzw. tooltipy (pomocnicze teksty na stronie).

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!