IB Tab
은 순수 웹 개발 환경에 가장 적합하게 설계된 Tab 컨트롤입니다.
기존에 복잡하고 많은 시간을 소요해서 만들었던 Tab의 다양한 기능을 HTML, javascript, CSS3
표준을 준수하여 빠르고 간편하게 만들 수 있습니다.
아래와 같은 규칙으로 ibtab-style.css
에 추가하거나 수정합니다.
별도의 파일을 만들어서 사용해도 됩니다. ibtab-style.css 보다 밑에 해당 스타일 시트를 추가
<!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">
<link rel="stylesheet" href="ibtab/css/customizing.css">
<script type="text/javascript">
// 일반적으로 사용 시
function fnLoadPage() {
// 탭 객체 생성
var tabs = document.getElementById("tabs");
var contents = document.getElementById("contents");
createIBTab(tabs, contents, "myTab", {
widthTabBar:"500px",
widthContents:"500px",
heightContents:"500px",
themes: {
//ib-tab-tabs.ib-ExampleTheme css 적용
tabs: "ExampleTheme",
//ib-tab-contents.ib-ExampleTheme css 적용
contents: "ExampleTheme",
//ib-context-menu.ib-ExampleTheme css 적용
contextMenu: "ExampleTheme"
}
});
}
</script>
</head>
<body onload="fnLoadPage();">
<div id="tabs"></div>
<div id="contents"></div>
</body>
</html>
상위 요소(탭바, 콘텐츠, 콘텍스트메뉴)의 css 클래스명을 ib-tab-tabs.ib-테마명
, ib-tab-contents.ib-테마명
, ib-tab-contextMenu.ib-테마명
형식으로 설정합니다.
※ 테마명(.ib-테마명)이 붙지 않은 클래스(코어 클래스, 하위 클래스)는 변경하지 않아도 됩니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"></script>
</head>
<body onload="fnLoadPage();">
<div id="tabs"></div>
<div id="contents"></div>
</body>
</html>
실행결과
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function doAction(sAction) {
switch(sAction) {
case "addTab":
var next = myTab.tabs.getCountTab();
addTab({
tabs: {
title: "TAB"+next
},
contents: {
type: "iframe",
contents: "./tabpage.jsp?pageName="+next+""
}
});
break;
case "removeAll":
myTab.removeTabAll();
break;
}
}
</script>
</head>
<body>
<input type="button" class="button" value="addTab" onClick="doAction('addTab');">
<input type="button" class="button" value="removeAll" onClick="doAction('removeAll');">
</body>
</html>
사용자가 언어 설정을 할 수 있도록 언어 설정 상수를 제공합니다. IBTABLANG
ibtabinfo.js에서 메시지 관련 정보를 추가 및 변경 할 수 있습니다.
IBTABLANG.언어코드.tab
: 탭 표현에 사용되는 언어 설정 (object)
IBTABLANG.언어코드.alert
: 데이터 오류나 사용자에게 경고 표시를 위한 언어 설정 (object)
IBTABLANG.언어코드.text
: tab, alert 이외의 자유롭게 사용하는 문자열을 위한 언어 설정 (object)
<script type="text/javascript">
myTab.getLang(); //IBTab에 설정된 언어코드를 반환
myTab.setLang("kr"); //IBTab에 언어코드를 설정
</script>