[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]

リボンモード

SpreadJSのリボンコンテナは、以下に示すように2つのリボンモードを提供します。

デフォルトリボンモード

designer-defaultmode

ツールバーリボンモード

designer-toolbarmode

ツールバーリボンモードは、特に携帯などのような機種の場合に役立ちます。

ツールバーリボンモードに切り替える

SpreadJSリボンコンテナは、デフォルトリボンモードで開始します。ただし、クイックスタートトピックで説明されているように、setConfigメソッドでGC.Spread.Sheets.Designer.ToolbarModeConfigを設定することでツールバーリボンモードに切り替えできます。

// デフォルトのリボンモードを持つリボンコンテナを初期化します。
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('gc-designer-host'));

// ツールバーリボンモードに切り替えます。
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

デフォルトやツールバーリボンモードを切り替える

次の例では、デフォルトリボンモードとツールバーリボンモードの間に切り替える方法を示します。

var switchConfig = true;

window.onload = function () {
    var designer = new GC.Spread.Sheets.Designer.Designer(designer_host);
    document.getElementById('btn').addEventListener('click', function () {
        designer.setConfig(switchConfig ? GC.Spread.Sheets.Designer.ToolBarModeConfig : GC.Spread.Sheets.Designer.DefaultConfig);
        switchConfig = !switchConfig;
    });
}

// ページにボタンコントロールを追加します。
<input type="button" id="btn" value="Switch Mode"/>

実行結果は次のようになります。

ツールバーモードでリボンの高さを設定する

ツールバーモードでリボンの高さを設定するには、ツールバーconfigにて ribbonHeight オプションを使用できます。ツールバーモード向けのribbonHeightのデフォルト値（推薦値）は50です。

次のサンプルコードは、リボンの高さを80に設定します。

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
var config = GC.Spread.Sheets.Designer.ToolBarModeConfig;

// リボンの高さを設定します。
config.ribbon.ribbonHeight = 80;

// カスタムconfigを設定します。
designer.setConfig(config);

実行結果は次のようになります。

メモ： デフォルトリボンモードで推奨されるribbonHeightは115です。ツールバーリボンモードを正しく表示するには、ribbonHeightを115以下の値に設定します。