SBUx - OVERVIEW

Tutorials

2.20 탭 컨텐츠를 윈도우 창으로 별도 보기

STEP 1. tabs 컴포넌트 생성

1. iframe이 적용된 tabs 컴포넌트를 생성합니다.

<script>
    var tabJsonData1 = [                
        { "id" : "0", "pid" : "-1", "order" : "1", "text" : "tab1", "targetid" : "tab1_1_1", "targetname" : "targetIframe1",
        "link" : "https://softbowllab.github.io/sbux/attribute/latest/input.uitype#input" },
        { "id" : "1", "pid" : "-1", "order" : "2", "text" : "tab2", "targetid" : "tab1_1_2" }
    ];  
</script>
<sbux-tabs id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" jsondata-ref="tabJsonData1"></sbux-tabs>
<div class="tab-content">
    <iframe id="idxfrmJson1" name="targetIframe1" style="width:100%;"></iframe>
    <div id="tab1_1_2">
        tab2 content
    </div>
</div>

STEP 2. div layer로 보기

1. is-draggable-openlayer 속성을 설정합니다.

<script>
    var tabJsonData1 = [                
        { "id" : "0", "pid" : "-1", "order" : "1", "text" : "tab1", "targetid" : "tab1_1_1", "targetname" : "targetIframe1",
        "link" : "https://softbowllab.github.io/sbux/attribute/latest/input.uitype#input" },
        { "id" : "1", "pid" : "-1", "order" : "2", "text" : "tab2", "targetid" : "tab1_1_2" }
    ];  
</script>
<sbux-tabs id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" jsondata-ref="tabJsonData1" is-draggable-openlayer="true"></sbux-tabs>
<div class="tab-content">
    <iframe id="idxfrmJson1" name="targetIframe1" style="width:100%;"></iframe>
    <div id="tab1_1_2">
        tab2 content
    </div>
</div>

STEP 3. 새창으로 보기

1. is-draggable-openwin 속성을 설정합니다.

<script>
    var tabJsonData1 = [                
        { "id" : "0", "pid" : "-1", "order" : "1", "text" : "tab1", "targetid" : "tab1_1_1", "targetname" : "targetIframe1",
        "link" : "https://softbowllab.github.io/sbux/attribute/latest/input.uitype#input" },
        { "id" : "1", "pid" : "-1", "order" : "2", "text" : "tab2", "targetid" : "tab1_1_2" }
    ];  
</script>
<sbux-tabs id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" jsondata-ref="tabJsonData1" is-draggable-openwin="true"></sbux-tabs>
<div class="tab-content">
    <iframe id="idxfrmJson1" name="targetIframe1" style="width:100%;"></iframe>
    <div id="tab1_1_2">
        tab2 content
    </div>
</div>

div-layer tab을 마우스로 tab 영역 밖으로 드래그해보세요.

tab2 content

open-window tab을 마우스로 tab 영역 밖으로 드래그해보세요.

tab2 content