StatusBar는 기본 제공 테마를 지원합니다.
테마 외에도 StatusBar는 cellMode, average, count, numericalCount, min, max, sum 및 zoom을 포함한 일부 기본 제공 상태 항목을 지원합니다.
StatusBar를 만들려면 호스트 DIV 요소를 추가하고 다음 예제와 같이 Spread 인스턴스에 바인딩하면 됩니다.
StatusBar가 바인딩된 컨텍스트를 변경하거나, StatusBar를 바인딩 해제할 수도 있습니다.
dispose()를 사용하여 StatusBar를 제거할 수 있습니다.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 1
});
initSpread(spread);
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById('statusBar')
);
statusBar.bind(spread);
};
function addThemeLink(href) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.onload = function() {
GC.Spread.Sheets.findControl("ss").refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
function bindThemeChangeEvent() {
document.getElementById('theme').onchange = function(e) {
var themeLink = document.querySelector('link[href*="gc.spread.sheets"]');
var href = themeLink.href.substr(0, themeLink.href.indexOf('gc.spread.sheets')) + e.target.value;
var header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
addThemeLink(href);
} else {
GC.Spread.Sheets.findControl("ss").refresh();
}
};
}
function initSpread(spread) {
var sheet = spread.getSheet(0);
bindThemeChangeEvent();
}
<!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$/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 class="sample-container">
<div id="ss" class="sample-spreadsheets"></div>
<div id="statusBar"></div>
</div>
<div class="sample-options">
<div class="options-toggle" role="button" data-click="toggle">
<svg fill="currentColor" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
</svg>
</div>
<div class="options-container">
<div class="option-row">
<label for="theme">Choose a theme:</label>
<select id="theme">
<option value="gc.spread.sheets.css">SpreadJS</option>
<option value="gc.spread.sheets.excel2013white.css" selected>Excel 2013 White</option>
<option value="gc.spread.sheets.excel2013lightGray.css">Excel 2013 Light Gray</option>
<option value="gc.spread.sheets.excel2013darkGray.css">Excel 2013 Dark Gray</option>
<option value="gc.spread.sheets.excel2016colorful.css">Excel 2016 Colorful</option>
<option value="gc.spread.sheets.excel2016darkGray.css">Excel 2016 Dark Gray</option>
<option value="gc.spread.sheets.excel2016black.css">Excel 2016 Black</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sample-options {
float: right;
height: 100%;
}
.options-toggle {
display: none;
}
@media only screen and (max-width: 768px) {
.options-toggle {
display: block !important;
top: 20px;
left: -30px;
width: 30px;
height: 30px;
position: absolute;
background-color: #86bd00;
line-height: 30px;
text-align: center;
padding: 4px;
box-sizing: border-box;
color: #fff;
}
.options-container {
width: 280px !important;
overflow: auto;
height: 100%;
padding: 22px;
box-sizing: border-box;
}
.sample-container {
width: 100% !important;
height: 100%;
overflow: hidden;
float: left;
}
.sample-options {
right: 0;
padding: 0 !important;
overflow: visible !important;
position: absolute;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);
transition: right .25s ease-in-out;
z-index: 1000;
}
.sample-options.hidden {
right: -280px;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
float: left;
}
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-container {
width: calc(100% - 280px);
height: 100%;
float: left;
}
.sample-spreadsheets {
width: 100%;
height: calc(100% - 25px);
overflow: hidden;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
}
.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;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}