タブストリップ

Spread.Sheetsのタブストリップは、Excelの機能と同様です。ナビゲーションボタンをクリックするとシートタブ間を移動でき、シートタブをクリックするとアクティブシートを変更できます。シートタブをドラッグすることでシートリストの順序を変更でき、タブストリップスプリッタをドラッグすることでタブストリップの幅を変更できます。タブストリップをカスタマイズすることもできます。

<p>タブストリップを表示するかどうかを切り替えるには、<strong>tabStripVisible</strong>を設定します。新規タブが表示されないようにするには、<strong>newTabVisible</strong>をfalseに設定します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); spread.options.tabStripVisible = <span class="hljs-literal">false</span>; <span class="hljs-comment">// また、tabStripVisibleをtrueに設定することもできます。</span> spread.options.newTabVisible = <span class="hljs-literal">false</span>; <span class="hljs-comment">// また、newTabVisibleをtrueに設定することもできます。</span> </code></pre> <p>シート名リストは、ナビゲーションボタンのすぐ後ろに表示されます。シートタブをダブルクリックすると、このシート名を変更できます。ダブルクリックによるシート名の変更、またはシート名の編集を禁止したい場合は、<strong>tabEditable</strong>オプションをfalseに設定します。シートタブをドラッグしてシートリストの順序を変更できるかどうかを制御するには、<strong>allowSheetReorder</strong>オプションを設定します。</p> <pre><code class="hljs js language-js"> spread.options.tabEditable = <span class="hljs-literal">true</span>; spread.options.allowSheetReorder = <span class="hljs-literal">true</span>; </code></pre> <p><strong>sheetTabColor</strong>オプションを使用すると、シートタブの色をカスタマイズできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); sheet.options.sheetTabColor = <span class="hljs-string">'red'</span>; </code></pre> <p>タブストリップスプリッタをドラッグすると、タブストリップの幅を変更できます。また、タブストリップ幅の比率を取得および設定するには、<strong>tabStripRatio</strong>オプションを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> ratio = spread.options.tabStripRatio; spread.options.tabStripRatio = <span class="hljs-number">0.6</span>; </code></pre> <p><strong>tabNavigationVisible</strong>オプションを使用することでタブナビゲーションの表示・非表示を制御できます。</p> <pre><code class="hljs js language-js"> spread.options.tabNavigationVisible = <span class="hljs-literal">false</span>; <span class="hljs-comment">// false:隠す。</span> </code></pre>
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('setTabStripRatio').addEventListener('click', function() { var ratio = parseFloat(_getElementById('tabstrip_ratio').value); if (!isNaN(ratio)) { spread.options.tabStripRatio = ratio; } }); _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="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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/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/@grapecity/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> <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>以下のオプションを使用して、タブストリップの外観と動作を変更します。</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> <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="設定" /> </div> <label >アクティブシートのタブの色を変更します。</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="設定" /> </div> <label >アクティブなシートタブを、指定したインデックス(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="設定" id="setTabStripRatio" /> </div> <label >タブストリップの幅を、Spreadインスタンスに対する比率で指定します(0~1)。</label> </div> </div> </body> </html>
.sizedLabel { display: inline-block; width: 150px; } .colorLabel { background-color: lavender; } 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; }