createIBTab (static)

ibtabinfo.js 파일에서 제공되는 함수로 IB Tab의 객체 생성 및 초기화를 합니다.

Syntax

var tabBar = document.getElementById("tab"),
    contents = document.getElementById("tab_contents");

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

Parameters

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) 콘텍스트메뉴 테마 설정

Returns

none

Example

<!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>

Since

version desc
7.3.0.0 기능 추가
7.3.0.3 checkNotSupport 옵션 추가
7.3.0.10 useCloseAllBTN 옵션 추가
7.3.0.12 tabMovable 옵션 추가