You can use the built-in tool strip items: Paste, Cut, Copy, and AutoFill.
You can also customize a touch tool strip item and add it to the touch tool strip.
You can use the text method to get and set the text of the item, use the font method to get and set the font of the item text, and use the foreColor method to get and set the color of the item text.
After you add the touch tool strip item, you can use getItem and getItems to get the items. Also, you can remove one or clear all the items.
You can customize the tool strip using the provided APIs. For example:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3});
initSpread(spread);
};
function _getElementById(id) {
return document.getElementById(id);
}
function initSpread(spread) {
var sheet = spread.sheets[0];
_getElementById('addItem').onclick = function () {
var name = _getElementById('name').value;
if (!name) {
alert("Please input a name for toolbar item.")
}
var text = _getElementById('text').value;
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8' +
'YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABMklEQVRIS7XSMUpDQRDG8YCt' +
'FxDsbb1H4lW8wnt38BA2VmIfC0mhhYVVIJXybC0U0gibbx47w+zm290nPIsfbDY7/4GQRQjhX9HLOdHL' +
'OdHLOdFL5ut243UQMnI3fu/nkg81OhxDeVyNS/xc8qFGBmOAhb3OzyWRGhnMQkV+LonU/Dxt1yzG+Dk7' +
'bJ5fSrrtbrfGm7B/e6fBnDZFa0EHQXwMA55NWyI9VVtgcTVxSa9NUVpwFFeNJT1YU7AFxbgqLBnjrQXN' +
'uNIl+Hc9+nhtwVkeaYn/riSYswMGVnmg4ReufYyxAx5P/nngG64giTF2wOP7ONwywCXITBJj7IDHn8CC' +
'3iucwxgXPsbYAY97YFH1AKdgceFjjB3iQGnJDZxAEhc+xtDL3MXyLvyVzh7F5hUWB34T0LLVazuTAAAA' +
'AElFTkSuQmCC';
var item = new GC.Spread.Sheets.Touch.TouchToolStripItem(name, text, image, function () {
spread.touchToolStrip.close();
alert("Runing clearing...");
});
spread.touchToolStrip.add(item);
};
_getElementById('removeItem').onclick = function () {
var name = _getElementById('name').value;
if (!name) {
alert("Please input the name which item to be removed.");
}
spread.touchToolStrip.remove(name);
};
_getElementById('clear').onclick = function () {
spread.touchToolStrip.clear();
}
_getElementById('addSeparator').onclick = function () {
spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());
};
_getElementById('setFont').onclick = function () {
var font = _getElementById('font').value;
if (!font) {
alert("Please input a font for item text.");
}
var name = _getElementById('name').value;
var item = spread.touchToolStrip.getItem(name);
if (item) {
item.font(font);
}
};
_getElementById('setForeColor').onclick = function () {
var foreColor = _getElementById('color').value;
if (!foreColor) {
alert("Please input a color for item text.");
}
var name = _getElementById('name').value;
var item = spread.touchToolStrip.getItem(name);
if (item) {
item.foreColor(foreColor);
}
};
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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">
<span>Select a cell using a touch enabled device.Select that cell again to view the customizable touch toolstrip.
</span>
</div>
<div class="option-row">
<span>Customize Toolstrip</span>
</div>
<div class="option-row">
<span>Add new menu item:</span>
</div>
<div class="option-row">
<label for="name">Name:</label>
<input id="name" value="demo_clear"/>
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" value="clear"/>
</div>
<div class="option-row">
<input type="button" value="Add Item" id="addItem" class="toolbar-setting"/>
<input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting"/>
</div>
<span>Toolstrip Item Style:</span>
<div class="option-row">
<input id="font" value="18px Arial"/>
<input type="button" id="setFont" value="Set Font"
title="Set font for toolstrip item with specified name"/>
</div>
<div class="option-row">
<input id="color" value="red"/>
<input type="button" id="setForeColor" value="Set Fore Color"
title="Set fore color for toolstrip item with specified name"/>
</div>
<div class="option-row">
<input type="button" value="Remove Toolstrip Item" id="removeItem"/>
<input type="button" value="Clear All Toolstrip Items" id="clear"/>
</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: inline-block;
min-width: 80px;
}
input,
select {
padding: 4px 8px;
margin-top: 6px;
width: 100%;
box-sizing: border-box;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
