Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery

bootstrap tutorials kurs

Jedną z ciekawszych funkcji bootstrap są zakładki (angielskie tabs lub pills). Jest to funkcjonalność dość powszechnie stosowana na strona internetowych.

Dużą jej zaletą jest pokazywanie innej treści w zależności od aktywnej „karty” przy czym adres strony pozostaje ten sam, lub zawiera „#”+nazwa „karty”.

Spis treści

Toggle

Jak działają Tabs i Pills

Nazwa zakładki wzięła się prawdopodobnie z podobieństwa do książki gdzie można używać zakładki do zaznaczenia określonej strony. Niestety w moim szablonie bootstrap nie działa prawidłowo dlatego gotowe demo znajduje się w osobnym pliku.

Różnice między tabs i pills w bootstrap jest widoczna na pierwszy rzut oka

Przykładowe Tabs

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul>

Przykładowe Pills

<ul style="margin: 19px 0px 15px;" class="test2 nav nav-pills">
   <li class="active"><a data-toggle="pill" href="#">Home</a></li>
   <li><a data-toggle="pill" href="#">Menu 1</a></li>
   <li><a data-toggle="pill" href="#">Menu 2</a></li>
   <li><a data-toggle="pill" href="#">Menu 3</a></li>
</ul>

Powyższe przykłady nie stanowią działającego skryptu a jedynie wstęp, podstawę do uzyskania określonego sposobu działania.

Jak wspomniałam zakładki często występują na stronach internetowych. Jeśli chodzi o ich funkcje to już zależy od inwencji autora strony np.:

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li class="dropdown">    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1    <span class="caret"></span></a>
   <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
   </ul>
   </li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
</ul>

To jednak również nie działa. W celu uruchomienia skryptu należy jeszcze dopisać pola z tekstem np.
DEMO

Kod z pliku:

 <div class="container">
  <h3>Vertical Pills - DEMO</h3>
  <div class="row">
    <div class="tab-content col-md-8">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
      </ul>
    </div>
    <div class="clearfix visible-lg"></div>
  </div>
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#homes">Home</a></li>
    <li><a data-toggle="tab" href="#menus1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menus2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menus3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="homes" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menus1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menus2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menus3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  </div>

By skrypt działał prawidłowo należy na stronie umieścić odnośnik do skryptów. Muszą się one znajdować pomiędzy znacznikami head head:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery

aurelia