IBTab 개요

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">
      // 일반적인 방법
      function fnLoadPage() {
        // 탭 객체 생성
        var tabs = document.getElementById("tabs");
        var contents = document.getElementById("contents");

        createIBTab(tabs, contents, "myTab", {
          widthTabBar:"480px",
          widthContents:"480px",
          heightContents:"400px"
        });
        myTab.setOptions({
          tabs: [{
            "title": "IBTab(H) 소개",
            "style": {
              "btnClose": true,
              "icon": {
                "type": "none"
              }
            }
          }],
          contents: [{
            "contents": "<div style='margin: 10px;'><h4>IBTab(H)</h4><p>▶ 크로스 브라우징, 크로스 플랫폼을 지원 <br/>▶ 별도의 개발툴이 필요없고 일반적인 JavaScript를 통하여 각 기능을 설정하고 사용 가능 <br/>▶ 웹개발자가 쉽게 이해할 수 있고 편하게 응용 가능 <br/>▶ HTML, JavaScript, CSS3의 표준을 준수하고 Internet Explorer 환경은 10버전 부터 지원 가능 <br/>▶ 개발 생산성을 높이고 쉽게 테마 커스터마이징이 가능 <br/>▶ JSON을 통한 통신 방식을 사용 <br/>▶ 메시지 파일 형식을 통한 다국어 지원 및 적용 용이 <br/>▶ 개발자에게는 쉬운 개발을 운용자에게는 편리한 운용 방안 제공</p></div>"
          }]
        });
        /*
        // 동적으로 추가 하는 방법
        myTab.addTab({
          tabs: {
            "title": "IBTab(H) 소개",
            "style": {
              "btnClose": true,
              "icon": {
                "type": "none"
              }
            }
          },
          contents: {
            "contents": "<div style='margin: 10px;'><h4>IBTab(H)</h4><p>▶ 크로스 브라우징, 크로스 플랫폼을 지원 <br/>▶ 별도의 개발툴이 필요없고 일반적인 JavaScript를 통하여 각 기능을 설정하고 사용 가능 <br/>▶ 웹개발자가 쉽게 이해할 수 있고 편하게 응용 가능 <br/>▶ HTML, JavaScript, CSS3의 표준을 준수하고 Internet Explorer 환경은 10버전 부터 지원 가능 <br/>▶ 개발 생산성을 높이고 쉽게 테마 커스터마이징이 가능 <br/>▶ JSON을 통한 통신 방식을 사용 <br/>▶ 메시지 파일 형식을 통한 다국어 지원 및 적용 용이 <br/>▶ 개발자에게는 쉬운 개발을 운용자에게는 편리한 운용 방안 제공</p></div>"
          }
        });
        */
      }
    </script>
  </head>
  <body onload="fnLoadPage();">
    <div id="tabs"></div>
    <div id="contents"></div>
  </body>
</html>

실행결과

s

javascript 함수로 각종 기능 버튼 생성 및 처리 작업 개발 용이

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