SpreadJSのスクロールバーは、 skin と mobile の2種類の外観を提供しています。これらの外観はデバイスに応じて自動的に切り替わります。
また spread.options.scrollbarAppearance を設定することにより、手動で変更することもできます。
モバイルスクロールバーの外観は、すべてのスプレッドテーマとサポートされている外部テーマを継承します。
さらに、CSS クラス名と CSSスタイル を使用して、モバイルスクロールバーの外観をカスタマイズすることができます。
window.onload = function () {
function addThemeLink(href, type) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", type);
link.onload = function () {
spread.refresh();
}
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
function onThemeChanged(e, type) {
var href = e.target.value,
themeLink = document.querySelector('link[name="' + type + '"]');
var header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
href.split("&&").forEach(function (item) {
addThemeLink(item, type);
});
} else {
spread.refresh();
}
}
document.getElementById('themes').onchange = function(e) {
onThemeChanged(e, 'external');
};
document.getElementById('customize').onchange = function(e) {
onThemeChanged(e, 'customize');
};
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
var sheet = spread.getActiveSheet();
sheet.setColumnCount(40);
addThemeLink(document.getElementById('themes').value, 'external');
addThemeLink(document.getElementById('customize').value, 'customize');
var mobileScrollbar = _getElementById("mobileScrollbar");
mobileScrollbar.addEventListener("change", function () {
spread.options.scrollbarAppearance = mobileScrollbar.checked ? GC.Spread.Sheets.ScrollbarAppearance.mobile : GC.Spread.Sheets.ScrollbarAppearance.skin;
});
};
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/ja/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$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<input type="checkbox" id="mobileScrollbar" checked="checked" />
<label for="mobileScrollbar">モバイル UI</label>
</div>
<div class="option-row">
<label for="themes">テーマ:</label>
<br>
<select id="themes">
<optgroup label="SpreadJS">
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css" selected="selected">Excel 2013white</option>
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css">Excel 2013lightGray</option>
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013darkGray.css">Excel 2013darkGray</option>
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css">Excel 2016colorful</option>
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css">Excel 2016darkGray</option>
<option value="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css">Excel 2016black</option>
</optgroup>
<optgroup label="Bootstrap">
<option value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Bootstrap 3.3.4
</option>
</optgroup>
<optgroup label="jQuery UI">
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/black-tie/jquery-ui.css">
Black Tie
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/blitzer/jquery-ui.css">
Blitzer
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/cupertino/jquery-ui.css">
Cupertino
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css">
Dark Hive
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dot-luv/jquery-ui.css">
Dot Luv
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css">
Eggplant
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/excite-bike/jquery-ui.css">
Excite Bike
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/flick/jquery-ui.css">
Flick
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/hot-sneaks/jquery-ui.css">
Hot Sneaks
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
Humanity
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/le-frog/jquery-ui.css">
Le Frog
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/mint-choc/jquery-ui.css">
Mint Chocolate
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/overcast/jquery-ui.css">
overcast
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/pepper-grinder/jquery-ui.css">
Pepper Grinder
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">
Redmond
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
Smoothness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/south-street/jquery-ui.css">
South Street
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/start/jquery-ui.css">
Start
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css">
Sunny
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/swanky-purse/jquery-ui.css">
Swanky Purse
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/trontastic/jquery-ui.css">
Trontastic
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css">
UI Darkness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
UI Lightness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/vader/jquery-ui.css">
Vader
</option>
</optgroup>
</select>
</div>
<div class="option-row">
<label for="customize">カスタムスタイル:</label>
<br>
<select id="customize">
<option value="./custmize/none.css" selected="selected">None</option>
<option value="./custmize/shadowTrack.css">Shadow Track</option>
<option value="./custmize/linearGradient.css">Linear Gradient</option>
<option value="./custmize/dataGridLike.css">Data Grid Like</option>
<option value="./custmize/closeToTheEdge.css">Close to the Edge</option>
</select>
</div>
</div>
</div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input,
select {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
}
.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;
}
.option-row label {
display: inline-block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
