시트 탭 상태 스타일
SpreadJS는 다음 시트 탭 상태를 지원합니다.
유형
메모
normal
시트 탭이 일반 상태입니다.
hover
마우스가 시트 탭을 가리킵니다.
protected
시트가 보호되어 있습니다.
active
시트 탭에 포커스가 있습니다.
selected
시트 탭이 선택 범위 내에 있습니다.
시트 탭 상태 스타일 설정의 예는 다음과 같습니다.
기본 시트 탭 상태 스타일 설정의 예는 다음과 같습니다.
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4, font: '16px Calibri' });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
const sheet1 = spread.getSheet(0);
const sheet2 = spread.getSheet(1);
const sheet3 = spread.getSheet(2);
const sheet4 = spread.getSheet(3);
sheet3.options.isProtected = true;
sheet4.options.isProtected = true;
// Set sheet tab state style
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(223, 181, 139)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(239, 218, 198)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(125, 137, 37)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(190, 196, 149)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(140, 36, 30)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(197, 147, 143)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(243, 157, 0)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(249, 206, 140)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.protected, {
icons: [
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.right
}
]
}, [sheet4.name()]);
// Set default sheet tab state styles
spread.options.defaultSheetTabStyles = {
[spreadNS.SheetTabState.protected]: {
icons: [{ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC' }]
}
};
// Description
sheet1.setColumnWidth(0, 500);
sheet1.setRowHeight(0, 50);
sheet1.setRowHeight(1, 50);
sheet1.setRowHeight(2, 50);
sheet1.setRowHeight(3, 50);
sheet1.setDefaultValue(0, 0, 'Set normal state styles and active state styles for the first four sheet tabs.');
sheet1.setDefaultValue(1, 0, 'Set protection state for Sheet3 and Sheet4.');
sheet1.setDefaultValue(2, 0, 'A separate protection state style is set for Sheet4.');
sheet1.setDefaultValue(3, 0, 'The default styles of protected state and active state are set for all sheet tabs.');
const style = new spreadNS.Style();
style.font = '18px Calibri';
style.vAlign = spreadNS.VerticalAlign.center;
sheet1.getRange(-1, 0, -1, 1).setStyle(style);
spread.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr" />
<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$/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" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}