Quick Start

IBTab 설치

IB Tab을 활용하여 구현 할 HTML 페이지 내에 다음 5가지 파일을 추가합니다. IE 10 이상 지원

<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/ibtab-style.css">
<script language="javascript" src="./js/ibleaders.js"></script>
<script language="javascript" src="./js/ibtab.js"></script>
<script language="javascript" src="./js/ibtabinfo.js"></script>

IBTab 객체 생성

IB Tab의 객체 생성은 2가지 방법으로 생성할 수 있습니다.

  1. 미리 구성된 DOM을 이용하는 방법 createIBTab
    미리 구성된 탭바 (탭아이템, 사용자정의 메뉴) 콘텐츠를 이용해서 IBTab(H) 객체가 생성됩니다. 계층과 클래스명을 더 명확히 해주어야 합니다.
    탭아이템 : ib-tab-tabs > ib-tab-tabs-item > [ib-tab-tabs-item__link > ib-tab-tabs-item__title]
    사용자정의 영역 : ib-tab-tabs > ib-tab-cus
    콘텐츠 : ib-tab-contents > [ib-tab-contents__item]
<!DOCTYPE html>
<html>
<head>
  <script src="ibtab/js/ibleaders.js"></script>
  <script src="ibtab/js/ibtabinfo.js"></script>
  <script src="ibtab/js/ibtab.js"></script>
  <link rel="stylesheet" href="ibtab/css/font-awesome.min.css">
  <link rel="stylesheet" href="ibtab/css/ibtab-style.min.css">
  <script type="text/javascript" charset="utf-8">
    function fnLoadPage() {
      var tabBar = document.getElementById("tab"),
          contents = document.getElementById("tab_contents");

      createIBTab(tabBar,contents,"myTabs",{
        widthTabBar: "100%",
        widthContents: "100%",
        allowCloseBTN: false
      });
    }
  </script>
</head>
<body onload="fnLoadPage()">
    <div id="tab" class="ib-tab-tabs">
       <div class="ib-tab-tabs-item">
         <a class="ib-tab-tabs-item__link">
           <span class="ib-tab-tabs-item__title">Tab1</span>
         </a>
         <a class="ib-tab-tabs-item__link">
           <span class="ib-tab-tabs-item__title">Tab2</span>
         </a>
         <a href="http://www.naver.com" target="_blank" class="ib-tab-tabs-item__link">
           <span class="ib-tab-tabs-item__title">Link</span>
           <i class="fa fa-close"></i>
         </a>
       </div>
     </div>
     <div id="tab_contents" class="ib-tab-contents">
       <div class="ib-tab-contents__item">
         <h2>Tab1</h2>
         <p><a href="javascript:void(0);">Tab1</a> ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
       </div>
       <div class="ib-tab-contents__item">
         <h2>Tab2</h2>
         <p>Tab2 ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
       </div>
     </div>
</body>
</html>
  1. 컨테이너로 사용할 특정 div엘리먼트를 이용해 탭을 생성하는 방법 createTab, setOptions

해당 div 엘리먼트를 컨테이너로 하는 IBTab 객체가 생성됩니다.

<!DOCTYPE html>
<html>
<head>
  <script src="ibtab/js/ibleaders.js"></script>
  <script src="ibtab/js/ibtabinfo.js"></script>
  <script src="ibtab/js/ibtab.js"></script>
  <link rel="stylesheet" href="ibtab/css/font-awesome.min.css">
  <link rel="stylesheet" href="ibtab/css/ibtab-style.min.css">
  <script type="text/javascript" charset="utf-8">
    function fnLoadPage() {
      var tabBar = document.getElementById("tab"),
        contents = document.getElementById("tab_contents");

        createIBTab(tabBar,contents,"myTabs",{
            widthTabBar: "100%",
            widthContents: "100%"
        });

        myTabs.setOptions({
          tabs: [{
            title: "Tab1",
              style: {
                btnClose: false,
                icon: {
                  type: "none"
                }
              }
            },{
            title: "Tab2",
                style: {
                btnClose: false,
                icon: {
                    type: "none"
                }
                }
            },{
                title: "Link",
                type: "link",
                style: {
                    icon: {
                        type: "none"
                    }
                },
                link: {
                    url: "http://www.naver.com",
                    target: "_blank"
                }
            }],
            contents: [{
                contents: "<h2>Tab1</h2><p><a href=\"javascript:void(0);\">Tab1</a> ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>"
            },{
                contents: "<h2>Tab2</h2><p>Tab2 ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>"
            }]
        });
    }
  </script>
</head>
<body onload="fnLoadPage()">
    <div id="tab"></div>
    <div id="tab_contents"></div>
</body>
</html>

탭 객체 초기화

IB Tab의 초기화 설정은 setOptions 메소드를 이용하여 설정합니다.

<!DOCTYPE html>
<html>
<head>
    <script src="ibtab/js/ibleaders.js"></script>
    <script src="ibtab/js/ibtabinfo.js"></script>
    <script src="ibtab/js/ibtab.js"></script>
    <link rel="stylesheet" href="ibtab/css/font-awesome.min.css">
    <link rel="stylesheet" href="ibtab/css/ibtab-style.min.css">
    <script type="text/javascript" charset="utf-8">
        function fnLoadPage() {
            var tabBar = document.getElementById("tab"),
                contents = document.getElementById("tab_contents");

            createIBTab(tabBar,contents,"myTabs");
        }
    </script>
</head>
<body onload="fnLoadPage()">
    <div id="tab"></div>
    <div id="tab_contents"></div>
</body>
</html>

주의 IB Tab은 데이터가 입력되지 않으면 모든 요소가 표현되지 않습니다.