맨위로가기
 

SBUx

닫기

Tabs

내용이 많은 컨텐츠를 동일한 영역에서 보여줄 때 사용하는 컴포넌트 입니다.

기본 사항

사항 설명 비고
HTML 태그 형태

<sbux-tabs></sbux-tabs>
필수 속성 id, name, uitype 고정형 title-target-id-array, title-text-array
변동형 jsondata-ref
* 2.6.962 버전이후 변경사항 :
- id 속성 미사용시 name 값으로 자동 매핑
- uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값 normal, inbox
필수 컨텐츠

<div class="tab-content" >

<div id="xxx"></div>

</div>

 Bootstrap CSS 와 혼용할 시
var SBUxConfig = { ...
UsingComplexCSS : true
};
<div class="tab-content">에서
<div class="sbux-tab-content">로 변경
예시) HTML 형태의 개발 - 고정형

<head>

   <style>

       .light-blue { color: #93cbf9 !important; }

   </style>

</head>

<body>


   <script>

       function evt_onclick (args){

           alert("tab 클릭시 이벤트 : "+args );

       }

   </script>


   <sbux-tabs id="idxTab_norm" name="tab_norm" uitype="normal"

                   title-target-id-array = "SBUx_JS^SBUx_IDE^SBGrid2_5"

                   title-text-array = "SBUx Tab^SBUx IDE Tab^SBGrid Tab"

                   title-target-value-array="SBUx 탭^SBUx IDE 탭^SBGrid 2.5버전"

                   title-glyphs-array = "light-blue glyphicon-star"

                   title-badge-color-array = "green^red"

                   title-badge-text-array  = "4^2"

                   title-style-array = "^{color:red}^{font-weight: bold;}"

                   title-dropdown-style="color:blue;font-size:11px"

                   placement = "top"

                   selected-tab-id = "SBGrid2_5"

                   onclick="evt_onclick(tab_norm)"></sbux-tabs>


   <div class="tab-content">

       <div id="SBUx_JS" >

           <p>SBUx 는 Pure HTML5 을 지원하는 제품입니다.</p>

        </div>

        <div id="SBUx_IDE" >

           <p>SBUx IDE 를 사용하여 손쉽게 개발하실 수 있습니다.(eclipse plug-in)</p>

        </div>

        <div id="SBGrid2_5" >

            <p>SBGrid Version 2.5 는 성능을 크게 향상시킨 그리드 차세대 버전입니다.</p>

        </div>

   </div>        


</body>
예시) HTML 형태의 개발 - 변동형

<head>

   <style>

       .light-blue { color: #93cbf9 !important; }

   </style>

</head>

<body>


   <script>

       function evt_onclick (args){

           alert("tab 클릭시 이벤트 : "+args );

       }


       var tabJsonData = [                

           { "id" : "0", "pid" : "-1", "order" : "1", "text" : "SBUx Tab", "targetid" : "SBUx_JS_JSON" , "targetvalue" : "SBUX 탭", "glyphs" : "light-blue glyphicon-star","badgecolor":"green","badgetext":"4","cssstyle" : "","selected":"" , "targetname" : "frmJson", "link":"./../site/consulting" , "closeicon":"true" },

           { "id" : "1", "pid" : "-1", "order" : "2", "text" : "SBUx IDE Tab", "targetid" : "SBUx_IDE_JSON" , "targetvalue" : "SBUX IDE탭", "badgecolor":"red","badgetext":"2","cssstyle" : "{color:red;}" , "targetname" : "frmJson", "link":"./../site/commission"},

           { "id" : "2", "pid" : "-1", "order" : "3", "text" : "SBGrid Versions", "targetid" : "" , "targetvalue" : "", "glyphs" : "","badgecolor":"","badgetext":"","cssstyle" : "{font-weight: bold;}","selected":"" },

           { "id" : "2_1", "pid" : "2", "order" : "1", "text" : "v2.1", "targetid" : "SBGrid2_1_JSON" , "targetvalue" : "SBGrid 2.1버전", "glyphs" : "","badgecolor":"","badgetext":"","cssstyle" : "{font-weight: bold;}","selected":"" },

           { "id" : "2_2", "pid" : "2", "order" : "2", "text" : "v2.5", "targetid" : "SBGrid2_5_JSON" , "targetvalue" : "SBGrid 2.5버전", "glyphs" : "","badgecolor":"","badgetext":"","cssstyle" : "{color: red;}","selected" : "selected" }

       ];  

   </script>


   <sbux-tabs id="idxtabTopJson" name="tabTopJson" uitype="normal"

                  placement="top"                                                              

                  onclick="evt_onclick(tabTopJson)"

                  jsondata-ref="tabJsonData"

                  jsondata-id="id"

                  jsondata-pid="pid"

                  jsondata-order="order"

                  jsondata-text="text"

                  jsondata-target-id="targetid"

                  jsondata-target-value="targetvalue"                                                                                  

                  jsondata-glyphs="glyphs"

                  jsondata-badgecolor="badgecolor"

                  jsondata-badgetext="badgetext"

                  jsondata-css-style="cssstyle"

                 

                  jsondata-target-name="targetname"        

                  jsondata-target-link="link"


                     is-draggable="true"

                     is-draggable-openlayer="true"

                     use-win-popup-bar="true"


                     style="padding-top:10px;padding-bottom:5px;"></sbux-tabs>

       

   <div class="tab-content">        

       <iframe id="idxfrmJson" name="frmJson" style="width:100%;border:0px; padding: 20px 20px 0 20px; height:100%; background-color:#f2f1f1;" ></iframe>


       <!-- 또는 div 형태로도 가능합니다. 이런 형태의 사용 시에는 jsondata 의

          iframe 설정인 targetname 과 link 를 없게 합니다 -->

       <div id="SBUx_JS_JSON" >

           <p>SBUx 는 Pure HTML5 을 지원하는 제품입니다.</p>

       </div>

       <div id="SBUx_IDE_JSON" >

           <p>SBUx IDE 를 사용하여 손쉽게 개발하실 수 있습니다.(eclipse plug-in)</p>

       </div>

       <div id="SBGrid2_1_JSON" >

           <p>SBGrid Version 2.1 을 많은 레퍼런스를 가진 제품입니다.</p>

       </div>

       <div id="SBGrid2_5_JSON" >

           <p>SBGrid Version 2.5 는 성능을 크게 향상시킨 그리드 차세대 버전입니다.</p>

       </div>

   </div>        

</body>
( * tabs 컴포넌트는 tab의 컨텐츠 영역에 대한 구문이 필수입니다
title-text-array 를 제외한 나머지 속성에서는 중괄호( { } ) 를 붙이지 않아도 동작합니다)
예시) jQuery Plugin 형태의 개발

<div id="sbArea"></div>

<div class="tab-content">

   <div id="SBUx_JS_JSON">

       <p>SBUx 는 Pure HTML5 을 지원하는 제품입니다.</p>

   </div>

   <div id="SBUx_IDE_JSON">

       <p>SBUx IDE 를 사용하여 손쉽게 개발하실 수 있습니다.(eclipse plug-in)</p>

   </div>

</div>

<script>

   var tabJsonData = [                

       { "id" : "0", "pid" : "-1", "order" : "1", "text" : "첫번째탭", "targetid" : "SBUx_JS_JSON" },

       { "id" : "1", "pid" : "-1", "order" : "2", "text" : "두번째탭", "targetid" : "SBUx_IDE_JSON" }

   ];

   $(document).ready(function(){

       $('#sbArea').sbTabs({

           name : 'sbScriptNm',

           uitype : 'normal',

           jsondataRef : 'tabJsonData',

           isScrollable : false

       });

   });

</script>

주요 속성 사항

속성명 설명 / 고정형 유형(n:normal, i:inbox, w:webacc) 비고
title-target-id-array 필수 컨텐츠의 div id 에 해당하는 값을 매칭 n | i | w
title-text-array 탭의 명을 id 와 일대일 매칭 n | i | w
title-target-value-array 탭 value 로 id 와 일대일 매칭 n | i | w
title-glyphs-array 탭명 좌측에 붙는 글리프 아이콘 n | i | w
title-badge-color-array 탭명 우측에 붙는 배지 색상 n | i | w (default | blue| green | sky | orange | red)
title-badge-text-array 탭명 우측에 붙는 배지 문구 n | i | w
title-style-array 탭의 style n | i | w
title-dropdown-style dropdown 되는 텍스트의 style n | i
placement 탭의 위치 n | i | w (top | bottom | left | right)
show-control-panel 탭 우측에 생성되는 기능 패널 n 탭좌우 이동,탭선택 리스트,탭닫음 기능
show-tooltip 탭 명의 툴팁 여부 n | i | w (false | true)
selected-tab-id 로딩시 선택될 탭 n | i | w 없을시 첫번째 탭 선택
control-tablist-height 컨트롤 패널의 탭리스트 높이 n 예) control-tablist-height='120px;'
close-others-remain-default 닫힘 탭 기능의 기본 메뉴 지정 n 복수개 지정시 '|'로 구분
all : 전체 탭 닫음
close-others-remain-tabid 을 사용시에는
all 옵션을 적용하여도 '전체 탭 닫음' 이 나타나지 않음
current : 현재 탭 닫음
exceptcurrent : 현재 탭을 제외한 탭 닫음
예) 전체 탭 닫음과 현재 탭을 제외한 탭 닫음을 나타내고자 할때
close-others-remain-default='all|exceptcurrent'
close-others-remain-tabid 닫힘 기능에서 남겨두어야할 id 들 n 복수개 지정시 '^'로 구분
예) close-others-remain-tabid='tab id1^tab id2'
close-others-remain-hidden 닫힘 리스트에 나타나지 않는 고정탭 id n 고정탭으로 설정된 탭은 닫힘 항목에서 제외
close-others-remain-alert 닫을 수 있는 하나만 남은 탭을 닫을 때 알림 메시지 활성화 여부 n (true | false)
close-others-remain-confirm 탭 닫기시 confirm 화면을 출력 n (false | true)
close-others-remain-confirm-theme 탭 닫기시 confirm 화면의 테마 n (sbalert | window)
ellipsis-width 탭 명의 글자수가 지정한 값보다 큰경우 ellipsis 처리 n 예)ellipsis-width="30px"
is-scrollable tab 내용이 많을 때 좌우로 tab을 이동하는 기능 활성 n | i (true | false)
제약사항) dropdown tab과는 사용 불가능
placement 속성의 top,bottom 에만 해당
is-draggable tab 마우스 드래그하여 순서를 바꾸는 기능 활성 n | i (false | true)
제약사항) dropdown tab과는 사용 불가능
placement 속성의 top,bottom 에만 해당
exclude-draggable-tabid tab drag 기능을 제외한 탭 id n | i 복수시 (구분자 : '^')
is-close-icon tab 삭제 기능으로 탭 우측에 'X'표시 n | i | w 일괄설정
is-close-icon="true"
개별설정 (구분자 : '^')
is-close-icon="true^false^true"
lazyloading 선택 탭만 컨텐츠를 로딩 n | i | w (false | true)
use-iframe-contentlink json data의 "contentlink" 속성 사용 시 해당 요소를 iframe으로 생성할지 선택하는 속성 n | i (false | true)
callback-before-select 탭 선택 되기 전 callback 함수 호출하여 동작 제어 n | i | w return false;인 경우 탭 선택 중단
callback-before-close 탭 삭제 되기 전 callback 함수 호출하여 동작 제어 n | i | w callback 으로 넘기는 파라메터값
- 첫번째 파라메터 : target id
- 두번째 파라메터 : tab 관련 object
function 의 return 값으로 false; 전달인 경우 탭 삭제 중단
callback-after-close 탭 삭제 된 후 facallback 함수 호출하여 동작 제어 n | i | w
onclick 마우스 클릭시 발생 n | i | w
ondblclick 마우스 더블 클릭시 발생 n | i | w
속성명 설명 / 변동형 유형(n:normal, i:inbox, w:webacc) 비고
placement 탭의 위치 n | i | w (top | bottom | left | right)
show-control-panel 탭 우측에 생성되는 기능 패널 n 탭좌우 이동,탭선택 리스트,탭닫음 기능
show-tooltip 탭 명의 툴팁 여부 n | i | w (false | true)
control-tablist-height 컨트롤 패널의 탭리스트 높이 n 예) control-tablist-height='120px;'
close-others-remain-default 닫힘 탭 기능의 기본 메뉴 지정 n 복수개 지정시 '|'로 구분
all : 전체 탭 닫음
close-others-remain-tabid 을 사용시에는
all 옵션을 적용하여도 '전체 탭 닫음' 이 나타나지 않음
current : 현재 탭 닫음
exceptcurrent : 현재 탭을 제외한 탭 닫음
예) 전체 탭 닫음과 현재 탭을 제외한 탭 닫음을 나타내고자 할때
close-others-remain-default='all|exceptcurrent'
close-others-remain-tabid 닫힘 기능에서 남겨두어야할 id 들 n 복수개 지정시 '^'로 구분
예) close-others-remain-tabid='tab id1^tab id2'
close-others-remain-hidden 닫힘 리스트에 나타나지 않는 고정탭 id n 고정탭으로 설정된 탭은 닫힘 항목에서 제외
close-others-remain-alert 닫을 수 있는 하나만 남은 탭을 닫을 때 알림 메시지 활성화 여부 n (true | false)
close-others-remain-confirm 탭 닫기시 confirm 화면을 출력 n (false | true)
close-others-remain-confirm-theme 탭 닫기시 confirm 화면의 테마 n (sbalert | window)
ellipsis-width 탭 명의 글자수가 지정한 값보다 큰경우 ellipsis 처리 n 예)ellipsis-width="30px"
jsondata-ref json data 참조 변수명 n | i | w
json data 구조
- id : unique id, jsondata-id 값과 매칭될 key 명
- pid : 부모 id, jsondata-pid 값과 매칭될 key 명
- order : 순서, jsondata-order 값과 매칭될 key 명
- text : 탭명, jsondata-text 값과 매칭될 key 명
- targetid : tab-content class 내 매칭되는 id, jsondata-target-id 값과 매칭될 key 명
- targetvalue : 탭클릭시 저장되는 값, jsondata-target-value 값과 매칭될 key 명
- glyphs : 탭 명 좌측 아이콘, jsondata-glyphs 값과 매칭될 key 명
- badgecolor : 탭명 우측 배지 색상, jsondata-badgecolor 값과 매칭될 key 명
- badgetext : 탭명 우측 배지 문자, jsondata-badgetext 값과 매칭될 key 명
- cssstyle : 탭명에 붙는 css style, jsondata-css-style 값과 매칭될 key 명
- targetname : iframe name, jsondata-target-name 값과 매칭될 key 명
- link : iframe src, jsondata-target-link 값과 매칭될 key 명
- selected : 로딩시 선택값, "selected" : "selected" 로 반영
- closeicon : 제거 아이콘 여부, jsondata-close-icon 값과 매칭될 key명
- contentlink : 페이지를 호출하여 소스를 가져올 주소, jsondata-content-link 값과 매칭될 key명
jsondata-id json data 내 id 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: id)
jsondata-pid json data 내 pid 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: pid)
jsondata-order json data 내 order 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: order)
jsondata-text json data 내 text 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: text)
jsondata-target-id json data 내 div id 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: targetid)
jsondata-target-value json data 내 value참조 키명 n | i | w Custom key 참조설정시 사용
(default key: targetvalue)
jsondata-glyphs json data 내 glyph 아이콘 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: glyphs)
jsondata-badgecolor json data 내 배지 색상 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: badgecolor)
jsondata-badgetext json data 내 배지 문자 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: badgetext)
jsondata-css-style json data 내 탭의 style 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: cssstyle)
jsondata-target-name json data 내 탭의 iframe 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: targetname)
jsondata-target-link json data 내 탭의 iframe src 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: link)
jsondata-close-icon json data 내 탭의 close icon 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: colseicon)
jsondata-content-link json data 내 탭의 외부 content import 참조 키명 n | i | w Custom key 참조설정시 사용
(default key: contentlink)
is-scrollable tab 내용이 많을 때 좌우로 tab을 이동하는 기능 활성 n | i (true | false)
제약사항) dropdown tab과는 사용 불가능
placement 속성의 top,bottom 에만 해당
is-draggable tab 마우스 드래그하여 순서를 바꾸는 기능 활성 n | i (false | true)
제약사항) dropdown tab과는 사용 불가능
placement 속성의 top,bottom 에만 해당
is-draggable-openlayer MDI 기능, drag 하여 영역밖으로 이동시 layer 팝업 open n | i (false | true)
use-win-popup-bar 팝업 layer를 최소화 시켰을 경우 하단에 팝업표시줄을 생성하여 표시 n | i (false | true)
is-draggable-openwin MDI 기능, drag 하여 영역밖으로 이동시 window 팝업 open n | i (false | true)
exclude-draggable-tabid tab drag 기능을 제외한 탭 id n | i 복수시 (구분자 : '^')
is-close-icon tab 삭제 기능으로 탭 우측에 'X'표시 n | i | w 일괄설정
is-close-icon="true"
개별설정 (구분자 : '^')
is-close-icon="true^false^true"
lazyloading 선택 탭만 컨텐츠를 로딩 n | i | w (false | true)
use-iframe-contentlink json data의 "contentlink" 속성 사용 시 해당 요소를 iframe으로 생성할지 선택하는 속성 n | i (false | true)
callback-before-select 탭 선택 되기 전 callback 함수 호출하여 동작 제어 n | i | w return false;인 경우 탭 선택 중단
callback-before-close 탭 삭제 되기 전 callback 함수 호출하여 동작 제어 n | i | w callback 으로 넘기는 파라메터값
- 첫번째 파라메터 : target id
- 두번째 파라메터 : tab 관련 object
function 의 return 값으로 false; 전달인 경우 탭 삭제 중단
callback-after-close 탭 삭제 된 후 facallback 함수 호출하여 동작 제어 n | i | w
callback-before-openlayer 탭을 마우스로 탭영역 위쪽으로 드래그한 후 드랍하여
Layer 팝업이 나타나기 전에 callback 함수를 호출하는 속성 		n | i
callback-after-openlayer 탭을 마우스로 탭영역 위쪽으로 드래그한 후 드랍하여
Layer 팝업이 나타난 후에 callback 함수를 호출하는 속성 		n | i
onclick 마우스 클릭시 발생 n | i | w
ondblclick 마우스 더블 클릭시 발생 n | i | w

주요 API 사항

API 명 설명 / 유형(n:normal, i:inbox, w:webacc) 비고
SBUxMethod.set 값을 입력 n | i | w
SBUxMethod.get 저장된 값 호출 n | i | w
SBUxMethod.refresh 재호출 n | i | w
SBUxMethod.hide 감추기 n | i | w
SBUxMethod.show 보이기 n | i | w
SBUxMethod.addTab 탭 추가 n | i | w var options = {
text : '첫번째 탭',
targetid : 'SBUx_Tab_1',
targetvalue : 'testTabValue',
glyphs : 'light-blue glyphicon-star',
cssstyle : 'font-weight: bold;width:100px;',
badgetext : '10',
badgecolor : 'green',
tabindex : 3,
position : 1, // 추가될 위치
isselect : false, // 추가 시 선택 여부
targetname : 'frmJson',
link : './../tabs/tabs',
closeicon : true,
contentlink: 'aframe.html',
applyjson : true // tab 데이터로 매칭된 jsondata-ref 에 참조되는 json 구조에 추가되는 탭의 데이터 반영 여부
};
SBUxMethod.addTab('모델명',options);
SBUxMethod.removeTab 입력된 id 의 탭을 삭제 n | i | w 예) SBUxMethod.removeTab('tabs_norm','tab1')
SBUxMethod.removeAllTab 모든 탭을 삭제 n | i | w 예) SBUxMethod.removeAllTab('tabs_norm');
SBUxMethod.removeOthersTab 입력된 id 를 제외한 나머지 탭을 삭제 n | i | w 복수시 (구분자 : '|')
예) SBUxMethod.removeOthersTab('tabs_norm','tab1|tab2');
SBUxMethod.getTabsCount 화면에 표시된 tab 의 개수를 반환 n | i | w 예) SBUxMethod.getTabsCount('tabs_norm');
SBUxMethod.selectTab tab 을 선택 n | i | w 예) SBUxMethod.selectTab('tab id');
SBUxMethod.setTabContentCSS 탭 컨텐츠 영역의 height 등의 css 를 동적으로 설정 n | i | w 예) SBUxMethod.setTabContentCSS('모델명',{변경할 css 정보 JSON 데이터});
SBUxMethod.excludeDraggableTab 탭 drag 대상에서 제외 n | i | w 예) SBUxMethod.excludeDraggableTab('모델명', 'tab id');
SBUxMethod.includeDraggableTab 탭 drag 대상에 포함 n | i | w 예) SBUxMethod.includeDraggableTab('모델명', 'tab id');
SBUxMethod.disableTab 탭을 비활성화 n | i | w 예) SBUxMethod.disableTab('tab id');
SBUxMethod.enableTab 탭을 활성화 n | i | w 예) SBUxMethod.enableTab('tab id');
SBUxMethod.showTab 탭을 보이게 함 n | i | w 예) SBUxMethod.showTab('tab id');
SBUxMethod.hideTab 탭을 비활성화 n | i | w 예) SBUxMethod.hideTab('tab id');
SBUxMethod.render <sbux-xxx tag >랜더링 n | i | w