연속 탭

Theme:

SpreadJS에는 사용자 정의 가능한 워크시트 탭 스트립이 있고, 각 요소는 코드로 제어할 수 있습니다.

SpreadJS의 옵션 속성을 사용하여 탭 스트립의 표시 여부 및 해당 요소의 동작을 제어합니다.

맨 왼쪽 탭 탐색 화살표: 탭 스트립에 맞출 수 있는 것보다 많은 워크시트가 있는 경우 화살표가 활성화되고, 화살표를 사용하여 다른 시트 탭을 목록에 표시할 수 있습니다.
워크시트 탭: 탭을 두 번 클릭하여 시트 이름을 바꾸고 탭을 끌어 놓아 시트 순서를 변경할 수 있습니다.
햄버거 버튼("≡"): 모든 시트 목록을 표시합니다.
원형 + 버튼: 통합 문서에 새 시트를 추가합니다.
탭 스트립 분할자: 탭 스트립이 통합 문서의 맨 아래에 있을 때 탭 스트립과 가로 스크롤 막대 사이에 있는 컨트롤의 가로 공간을 분할하는 데 사용됩니다.
탭 스트립 위치: 탭 스트립을 스프레드시트의 맨 아래(기본값), 맨 위, 왼쪽 또는 오른쪽에 배치할지 지정합니다.

tabStripVisible 옵션을 사용하여 전체 탭 스트립의 표시 여부를 제어합니다.

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.options.tabStripVisible = false;

tabNavigationVisible 옵션을 false로 설정하여 기본적으로 표시되는 탐색 화살표 버튼을 숨깁니다.

    spread.options.tabNavigationVisible = false; // false: hide, true: show

tabEditable 옵션(부울)을 설정하여 사용자가 시트 이름을 변경하거나 변경하지 못하도록 합니다.

    spread.options.tabEditable = true;

allowSheetReorder 옵션(부울)을 사용하여 사용자가 시트 순서를 변경하거나 변경하지 못하도록 합니다.

    spread.options.allowSheetReorder = true;

색 이름 문자열인 'red', 'green'을 사용하는 sheetTabColor를 설정하여 활성 시트 탭의 색을 변경합니다.

    var sheet = spread.getActiveSheet();
    sheet.options.sheetTabColor = 'red';

기본적으로 표시되는 + 원형 버튼의 표시 여부를 제어하는 newTabVisible 옵션을 사용하여 사용자가 통합 문서에 시트를 추가하거나 추가하지 못하도록 합니다.

    spread.options.newTabVisible = false;

tabStripRatio 옵션은 탭 스트립에 할당되는 가로 공간 크기를 지정하는 백분율 값(0.x)입니다. 나머지 가로 영역(1~0.x)은 가로 스크롤 막대에 할당됩니다.

    spread.options.tabStripRatio = 0.6;

tabStripPosition을 사용하여 통합 문서를 기준으로 탭 스트립 위치를 변경할 수 있습니다. 방향에는 다음 네 종류가 있습니다.

bottom: 탭 스트립이 통합 문서의 맨 아래에 있으며, tabStripPosition의 기본값입니다.
top: 탭 스트립이 통합 문서의 맨 위에 있습니다.
left: 탭 스트립이 통합 문서의 왼쪽에 있습니다.
right: 탭 스트립이 통합 문서의 오른쪽에 있습니다.

탭 스트립이 통합 문서의 왼쪽 또는 오른쪽에 있으면 마우스 휠을 사용하여 탭을 스크롤할 수 있습니다.

    spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.left;

탭 스트립이 통합 문서의 왼쪽 또는 오른쪽에 있으면 tabStripWidth를 사용하여 너비를 사용자 정의할 수 있습니다. 이는 시트 이름이 긴 경우 유용할 수 있습니다. 기본 최소값은 80입니다.

    spread.options.tabStripWidth = 200;

"≡" 버튼의 표시 여부(기본값: auto)를 제어하는 allSheetsListVisible 옵션을 사용하여 사용자가 모든 시트 대화 상자를 열거나 열지 못하도록 합니다.

    spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.auto;

SpreadJS의 옵션 속성을 사용하여 탭 스트립의 표시 여부 및 해당 요소의 동작을 제어합니다. 맨 왼쪽 탭 탐색 화살표: 탭 스트립에 맞출 수 있는 것보다 많은 워크시트가 있는 경우 화살표가 활성화되고, 화살표를 사용하여 다른 시트 탭을 목록에 표시할 수 있습니다. 워크시트 탭: 탭을 두 번 클릭하여 시트 이름을 바꾸고 탭을 끌어 놓아 시트 순서를 변경할 수 있습니다. 햄버거 버튼("≡"): 모든 시트 목록을 표시합니다. 원형 + 버튼: 통합 문서에 새 시트를 추가합니다. 탭 스트립 분할자: 탭 스트립이 통합 문서의 맨 아래에 있을 때 탭 스트립과 가로 스크롤 막대 사이에 있는 컨트롤의 가로 공간을 분할하는 데 사용됩니다. 탭 스트립 위치: 탭 스트립을 스프레드시트의 맨 아래(기본값), 맨 위, 왼쪽 또는 오른쪽에 배치할지 지정합니다. tabStripVisible 옵션을 사용하여 전체 탭 스트립의 표시 여부를 제어합니다. tabNavigationVisible 옵션을 false로 설정하여 기본적으로 표시되는 탐색 화살표 버튼을 숨깁니다. tabEditable 옵션(부울)을 설정하여 사용자가 시트 이름을 변경하거나 변경하지 못하도록 합니다. allowSheetReorder 옵션(부울)을 사용하여 사용자가 시트 순서를 변경하거나 변경하지 못하도록 합니다. 색 이름 문자열인 'red', 'green'을 사용하는 sheetTabColor를 설정하여 활성 시트 탭의 색을 변경합니다. 기본적으로 표시되는 + 원형 버튼의 표시 여부를 제어하는 newTabVisible 옵션을 사용하여 사용자가 통합 문서에 시트를 추가하거나 추가하지 못하도록 합니다. tabStripRatio 옵션은 탭 스트립에 할당되는 가로 공간 크기를 지정하는 백분율 값(0.x)입니다. 나머지 가로 영역(1~0.x)은 가로 스크롤 막대에 할당됩니다. tabStripPosition을 사용하여 통합 문서를 기준으로 탭 스트립 위치를 변경할 수 있습니다. 방향에는 다음 네 종류가 있습니다. bottom: 탭 스트립이 통합 문서의 맨 아래에 있으며, tabStripPosition의 기본값입니다. top: 탭 스트립이 통합 문서의 맨 위에 있습니다. left: 탭 스트립이 통합 문서의 왼쪽에 있습니다. right: 탭 스트립이 통합 문서의 오른쪽에 있습니다. 탭 스트립이 통합 문서의 왼쪽 또는 오른쪽에 있으면 마우스 휠을 사용하여 탭을 스크롤할 수 있습니다. 탭 스트립이 통합 문서의 왼쪽 또는 오른쪽에 있으면 tabStripWidth를 사용하여 너비를 사용자 정의할 수 있습니다. 이는 시트 이름이 긴 경우 유용할 수 있습니다. 기본 최소값은 80입니다. "≡" 버튼의 표시 여부(기본값: auto)를 제어하는 allSheetsListVisible 옵션을 사용하여 사용자가 모든 시트 대화 상자를 열거나 열지 못하도록 합니다.

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
spread.setSheetCount(2);
initSpread(spread);
_getElementById('newtab_show').addEventListener('click', function() {
spread.options.newTabVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tab_editable').addEventListener('click', function() {
spread.options.tabEditable = this.checked;
});
_getElementById('tabstrip_visible').addEventListener('click', function() {
spread.options.tabStripVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tabnavigation_Visible').addEventListener('click', function() {
spread.options.tabNavigationVisible = this.checked;
});
_getElementById('allSheetsButton_Visible').addEventListener('change', function() {
spread.options.allSheetsListVisible = Number(this.value);
});
_getElementById('tabstrip_position').addEventListener('change', function() {
spread.options.tabStripPosition = Number(this.value);
});
_getElementById('setTabStripRatio').addEventListener('click', function() {
var ratio = parseFloat(_getElementById('tabstrip_ratio').value);
if (!isNaN(ratio)) {
spread.options.tabStripRatio = ratio;
}
});
_getElementById('setTabStripWidth').addEventListener('click', function() {
var width = parseInt(_getElementById('tabstrip_width').value);
if (!isNaN(width)) {
spread.options.tabStripWidth = width;
}
});
_getElementById('setStartSheetIndex').addEventListener('click', function() {
var index = _getElementById('startSheetIndex').value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.startSheetIndex(index);
}
}
});
_getElementById('setSheetTabColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
if (sheet) {
var color = _getElementById('sheetTabColor').value;
sheet.options.sheetTabColor = color;
}
});
function initSpread(spread) {
var sd = dataSource;
var sheet = spread.getActiveSheet();
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, 160);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
}
};
function _getElementById(id){
return document.getElementById(id);
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label>Use these options to change the appearance and behavior of the tab strip.</label>
</div>
<div class="option-row">
<input type="checkbox" id="newtab_show" checked />
<label for="newtab_show">showNewTab</label>
</div>
<div class="option-row">
<input type="checkbox" id="tab_editable" checked />
<label for="tab_editable">tabEditable</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabstrip_visible" checked />
<label for="tabstrip_visible">tabStripVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabnavigation_Visible" checked />
<label for="tabnavigation_Visible">tabNavigationVisible</label>
</div>
<div class="option-row">
<select id="allSheetsButton_Visible">
<option value="2">auto</option>
<option value="0">hidden</option>
<option value="1">show</option>
</select>
<label for="allSheetsButton_Visible">allSheetsButtonVisible</label>
</div>
<div class="option-row">
<select id="tabstrip_position">
<option value="0">bottom</option>
<option value="1">top</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
<label for="tabstrip_position">tabStripPosition</label>
</div>
<hr>
<label for="sheetTabColor" class="sizedLabel" style="padding-top: 20px">activeSheetTabColor:</label>
<div class="option-row">
<input type="text" id="sheetTabColor" value="red" />
<input type="button" id="setSheetTabColor" value="Set" />
</div>
<label >This changes the color for the tab of the active sheet.</label>
<br />
<label for="startSheetIndex" class="sizedLabel" style="padding-top: 20px">startSheetIndex:</label>
<div class="option-row">
<input type="text" id="startSheetIndex" value="0" />
<input type="button" id="setStartSheetIndex" value="Set" />
</div>
<label >This navigates the sheet tab to the tab at the index specified (starting at 0).</label>
<br>
<label for="tabstrip_ratio" class="sizedLabel" style="padding-top: 20px">tabStripRatio:</label>
<div class="option-row">
<input type="text" id="tabstrip_ratio" value="0.5" />
<input type="button" value="Set" id="setTabStripRatio" />
</div>
<label >This specifies the width ratio of the TabStrip to the width of the Spread instance (between 0 and 1).</label>
<br>
<label for="tabstrip_width" class="sizedLabel" style="padding-top: 20px">tabStripWidth:</label>
<div class="option-row">
<input type="text" id="tabstrip_width" value="80" />
<input type="button" value="Set" id="setTabStripWidth" />
</div>
<label >This specifies the width of the TabStrip when it is at the left and right of workbook. The minimum is 80.</label>
</div>
</div>
</body>
</html>

.sizedLabel {
display: inline-block;
width: 150px;
}
.colorLabel {
background-color: #F4F8EB;
}
input[type="text"] {
width: 100px;
}
input[type="button"] {
width: 60px;
margin: 0 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}