タブストリップ

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

  • 一番左のタブナビゲーション矢印:タブストリップに収まりきらない数のワークシートがある場合、矢印が有効になり、ユーザーはこの矢印を使ってリスト内の他のシートタブを表示できるようになります。
  • ワークシートのタブ:タブをダブルクリックしてシート名を変更したり、タブをドラッグ&ドロップしてシートを並べ替えたりすることができます。
  • 丸で囲んだ+ボタン:ワークブックに新しいシートを追加します。
  • タブストリップスプリッタ:タブストリップがワークブックの下部にある場合に、コントロールの水平方向のスペースをタブストリップと水平スクロールバーの間で分割するために使用します。
  • タブストリップの位置:タブストリップの位置を、スプレッドシートの下(デフォルト)、上、左、右のいずれかにするかを指定します。
SpreadJSのオプションプロパティを使用して、タブストリップの可視性とその要素の動作を制御します: tabStripVisibleオプションを使用して、タブストリップ全体の可視性を制御します: tabNavigationVisibleオプションをfalseに設定すると、デフォルトで表示されるナビゲーション矢印ボタンが非表示になります。 tabEditableオプション(ブール値)を設定して、ユーザーがシートの名前を変更できるようにするか、または禁止します。 allowSheetReorderオプション(ブール値)を使用して、ユーザーがシートを並べ替えることを許可または禁止します。 sheetTabColorに色名の文字列('red'、'green')を設定して、ActiveSheetsタブの色を変更します。 newTabVisibleオプションで、丸で囲まれた「+」ボタン(デフォルトで表示)の表示を制御して、ワークブックにシートを追加することを許可または禁止します。 tabStripRatioオプションは、タブストリップに割り当てられる水平方向のスペースの量を指定するパーセンテージ値(0.x)です。残りの水平領域(1~0.x)は、水平スクロールバーに割り当てられます。 tabStripPositionを使用して、ワークブックに対するタブストリップの位置を変更します。方向は4種類あります: bottom:タブストリップはワークブックの下部にあり、tabStripPositionのデフォルト値です。 top:タブストリップはワークブックの上部にあります。 left:タブストリップはワークブックの左側にあります。 right:タブストリップはワークブックの右側にあります。 タブストリップがワークブックの左側または右側にある場合、マウスホイールを使用してタブをスクロールできます。 タブストリップがワークブックの左側または右側にある場合、tabStripWidthを使用してその幅をカスタマイズできます。シート名が長いときに役立ちます。デフォルトおよび最小値は80です。
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('tabstrip_position').addEventListener('change', function() { spread.options.tabStripPosition = Number(this.value); }); _getElementById('setTabStripRatio').addEventListener('click', function() { var ratio = parseFloat(_getElementById('tabstrip_ratio').value); if (!isNaN(ratio)) { spread.options.tabStripRatio = ratio; } }); _getElementById('setTabStripWidth').addEventListener('click', function() { var width = parseInt(_getElementById('tabstrip_width').value); if (!isNaN(width)) { spread.options.tabStripWidth = width; } }); _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">タブの追加ボタンを表示する</label> </div> <div class="option-row"> <input type="checkbox" id="tab_editable" checked /> <label for="tab_editable">タブの編集を許可する</label> </div> <div class="option-row"> <input type="checkbox" id="tabstrip_visible" checked /> <label for="tabstrip_visible">タブを表示する</label> </div> <div class="option-row"> <input type="checkbox" id="tabnavigation_Visible" checked /> <label for="tabnavigation_Visible">タブのナビゲーターを表示する</label> </div> <div class="option-row"> <label for="tabstrip_position">タブストリップの位置</label> <select id="tabstrip_position"> <option value="0">bottom</option> <option value="1">top</option> <option value="2">left</option> <option value="3">right</option> </select> </div> <hr> <label for="sheetTabColor" class="sizedLabel" style="padding-top: 20px">アクティブなタブの色:</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">先頭のシートタブ:</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">タブストリップの幅:</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> <br> <label for="tabstrip_width" class="sizedLabel" style="padding-top: 20px">タブストリップの幅:</label> <div class="option-row"> <input type="text" id="tabstrip_width" value="80" /> <input type="button" value="設定" id="setTabStripWidth" /> </div> <label >タブストリップがワークブックの左右に配置されるときの幅を指定します。最小値は80です。</label> </div> </div> </body> </html>
.sizedLabel { display: inline-block; width: 150px; } .colorLabel { background-color: #F4F8EB; } 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; }