ibtabinfo.js 파일에서 제공되는 함수로 IB Tab의 객체 생성 및 초기화를 합니다.
var tabBar = document.getElementById("tab"),
contents = document.getElementById("tab_contents");
createIBTab(tabBar,contents,"myTabs",{
widthTabBar: "100%",
widthContents: "100%",
allowCloseBTN: false
});
Name | Type | Required | Description |
---|---|---|---|
tabs |
object |
필수 | 탭바 컨테이너의 DOM객체 |
contents |
object |
필수 | 콘텐츠 컨테이너의 DOM객체 |
id |
string |
필수 | 생성할 탭의 id |
opt |
object |
선택 | 탭 생성 옵션 |
opt.widthTabBar |
string |
선택 | 생성할 탭바의 너비(단위:px) |
opt.heightTabBar |
string |
선택 | 생성할 탭바의 높이(단위:px) |
opt.widthContents |
string |
선택 | 생성할 콘텐츠의 너비(단위:px) |
opt.heightContents |
string |
선택 | 생성할 콘텐츠의 높이(단위:px) |
opt.lang |
string |
선택(default : kr ) |
언어 설정 |
opt.allowCloseBTN |
boolean |
선택(default : true ) |
미리 만들어진 DOM으로 탭 객체를 만들때 닫기버튼 유무 |
opt.checkNotSupport |
boolean |
선택(default : false ) |
미지원 안내 박스 표시 유무 |
opt.tabMovable |
boolean |
선택(default : false ) |
마우스 드래깅으로 탭이동 가능 유무 |
opt.useCloseAllBTN |
boolean |
선택(default : false ) |
네비게이션 및 드롭다운메뉴영역에서 햄버거버튼 클릭시 모든 탭 닫기 표시 유무 |
opt.themes |
object |
선택 | 테마 설정 |
opt.themes.tabs |
string |
선택(default : classic_blue ) |
탭바 테마 설정 |
opt.themes.contents |
string |
선택(default : classic_blue ) |
콘텐츠 테마 설정 |
opt.themes.contextMenu |
string |
선택(default : classic_blue ) |
콘텍스트메뉴 테마 설정 |
none
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//body의 onload 이벤트 또는, jQuery를 사용하는 경우 $(document).ready(); 에서 설정
function fnLoadPage () {
// 탭 객체 생성
var tabs = document.getElementById("tabs"),
contents = document.getElementById("contents");
createIBTab(tabs, contents, "myTab", {
widthTabBar:"500px",
widthContents:"500px",
heightContents:"500px"
});
}
</script>
</head>
<body onload="fnLoadPage();">
<div id="tabs"></div>
<div id="contents"></div>
</body>
</html>
version | desc |
---|---|
7.3.0.0 | 기능 추가 |
7.3.0.3 | checkNotSupport 옵션 추가 |
7.3.0.10 | useCloseAllBTN 옵션 추가 |
7.3.0.12 | tabMovable 옵션 추가 |