[Bootstrap] 탭 (Tab)

Open source/Bootstrap  2020. 2. 28. 09:00

안녕하세요. 명월입니다.


이 글은 Bootstrap에서 Tab 메뉴에 대한 글입니다.


예전에 Bootstrap에서 메뉴를 설정하는 방법에 대해 설명한 적이 있습니다.

링크 - [Bootstrap] 메뉴 바 ( Navbar )


NavBar와 Tab은 여러모로 많이 비슷합니다.

차이라고 하면, NavBar의 경우는 각 메뉴가 Hiperlink로 되어 있어 각 페이지로 이동하는 것이지만, Tab의 경우는 페이지 이동이 아니고 각 메뉴의 내용은 이미 로드되어 있고 Tab 메뉴에 의해 표시 여부를 설정하는 컨트롤입니다.

링크 - https://getbootstrap.com/docs/3.4/javascript/#tabs

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- Tab을 구성할 영역 설정-->
  <div style="margin:10px;">
    <!-- Tab 영역 태그는 ul이고 클래스는 nav와 nav-tabs를 설정한다. -->
    <ul class="nav nav-tabs">
      <!-- Tab 아이템이다. 태그는 li과 li > a이다. li태그에 active는 현재 선택되어 있는 탭 메뉴이다. -->
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <!-- a 태그의 href는 아래의 tab-content 영역의 id를 설정하고 data-toggle 속성을 tab으로 설정한다. -->
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab이 선택되면 내용이 보여지는 영역이다. -->
    <!-- 태그는 div이고 class는 tab-content로 설정한다. -->
    <div class="tab-content">
      <!-- 각 탭이 선택되면 보여지는 내용이다. 태그는 div이고 클래스는 tab-pane이다. -->
      <!-- active 클래스는 현재 선택되어 있는 탭 영역이다. -->
      <div class="tab-pane fade in active" id="home">Home 메뉴</div>
      <!-- id는 고유한 이름으로 설정하고 tab의 href와 연결되어야 한다. -->
      <div class="tab-pane fade" id="profile">Profile 메뉴</div>
      <!-- fade 클래스는 선택적인 사항으로 트랜지션(transition)효과가 있다.
      <!-- in 클래스는 fade 클래스를 선언하여 트랜지션효과를 사용할 때 in은 active와 선택되어 있는 탭 영역의 설정이다. -->
      <div class="tab-pane fade" id="messages">Messages 메뉴</div>
      <div class="tab-pane fade" id="settings">Settings 메뉴</div>
    </div>
  </div>
</body>		
</html>
Home 메뉴
Profile 메뉴
Messages 메뉴
Settings 메뉴

탭을 Javascript으로 선택할 수도 있습니다.

강제적으로 jquery의 addClass를 사용해서 active클래스를 넣어도 가능합니다만, Bootstrap에서는 조금 더 심플하게 Javascript를 사용하게 합니다.

<script>
  $('a[href="#settings"]').tab('show');
</script>

또 이 tab 메뉴들은 event가 있습니다.

<script>
// 메뉴가 선택되어 active가 되기 전 이벤트
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 현재 설정된 tab
  e.relatedTarget // 이전에 설정된 탭
});
// 메뉴가 선택되어 active가 된 후 이벤트
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 현재 설정된 tab
  e.relatedTarget // 이전에 설정된 탭
});
// 다른 메뉴가 선택되어 active가 remove 되기 전 이벤트
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
  e.target // 현재 설정된 tab
  e.relatedTarget // 이전에 설정된 탭
});
// 다른 메뉴가 선택되어 active가 remove 된 후 이벤트
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
  e.target // 현재 설정된 tab
  e.relatedTarget // 이전에 설정된 탭
});
<script>
Home 메뉴
Profile 메뉴
Messages 메뉴
Settings 메뉴

위 예제를 실행해 보시면 hide->show->hidden->hide순으로 이벤트가 실행되는 것을 확인할 수 있습니다.


그럼 이 이벤트로 실제로 많이 활용하는 방법으로 지금까지 페이지를 전부 로드한 뒤에 tab 컨트롤로 해당 영역을 표시하는 것으로 설정했지만, event를 통해서 ajax로 비동기 화면 설정을 가능하게 할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- Tab을 구성할 영역 설정-->
  <div style="margin:10px;">
    <!-- tab 영역이다. -->
    <ul class="nav nav-tabs">
      <!-- data-load를 넣어서 이미 로드를 했는지 않했는지의 판단 값을 넣는다. -->
      <!-- true면 이미 content영역에 load가 끝나서 더이상 load가 필요없다는 뜻이다. -->
      <li class="active"><a href="#home1" data-toggle="tab" data-load="true">Home</a></li>
      <!-- false라면 data-url영역의 url주소로 데이터를 가져와서 tab-content에 표시한다. -->
      <li><a href="#homepage" data-toggle="tab" data-load="false" data-url="https://nowonbun.tistory.com">명월일지</a></li>
    </ul>
    <!-- tab-content 영역이다. -->
    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">Home 메뉴</div>
      <div class="tab-pane fade" id="homepage"></div>
    </div>
  </div>
  <script>
  // 위 ajax를 통한 data.load는 따로 bootstrap에 정의된 기능이 아니기 때문에 구현해야한다.
  // 메뉴가 선택되기 전의 이벤틀르 가져온다.
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    // 선택되는 요소를 오브젝트화 한다.
    $this = $(e.target);
    // data-load가 false의 경우는 content에 data-load를 한다.
    if(!$this.data("load")) {
      // tab-content의 id를 취득한다.
      var id = $this.attr("href");
      // 페이지 로드를 한다.
      $(id).load($this.data("url"));
      // data-load를 true로 변환하여 중복 로딩이 없게 한다.
      $this.data("load", true);
    }
  });
  $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
    // 여기에 load 삭제 기능을 넣어도 되고...
  });
  </script>
</body>		
</html>
Home 메뉴

여기까지 Bootstrap에서 Tab 메뉴에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시

'Open source > Bootstrap' 카테고리의 다른 글

[Bootstrap] 요소 고정(Affix)  (0) 2020.03.04
[Bootstrap] 이미지 슬라이딩 컨트롤(carousel)  (0) 2020.03.03
[Bootstrap] 팝오버(popover)  (0) 2020.03.02
[Bootstrap] 툴팁(tooltip)  (0) 2020.02.29
[Bootstrap] Panel과 Thumbnails, Card  (0) 2020.02.27
[Bootstrap] 페이징(Paging)와 페이저(pager)  (0) 2020.02.26
[Bootstrap] 드롭 다운(Dropdown)  (0) 2020.02.24
[Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법  (0) 2019.12.01