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>
IB Tab의 객체 생성은 2가지 방법으로 생성할 수 있습니다.
미리 구성된 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>
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은 데이터가 입력되지 않으면 모든 요소가 표현되지 않습니다.