メニュー:階層メニュー

subItemsPathをデータソースの一部であるプロパティ値に設定することによって、Menuコントロールを使用して階層型メニューを作成できます。このサンプルは、階層的なメニューを持ついくつかのMenuコントロールを使用して、サポートされている機能を示します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/wijmo'; import { getMenuTree } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let menuTree = getMenuTree(); // // element used to show menu commands let target = document.querySelector('#menuTarget'), targetStyle = target.style, computedStyle = getComputedStyle(target); // // create File menu (uses itemClicked event) let menuFile = new input.Menu('#menu-file', { header: 'ファイル', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.fileMenu, itemClicked: (sender) => { target.innerHTML = `<b><i>${sender.text}</i></b>がクリックされました。`; } }); // // create Edit menu (uses itemClicked event) let menuEdit = new input.Menu('#menu-edit', { header: '編集', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.editMenu, itemClicked: (sender) => { target.innerHTML = `<b><i>${sender.text}</i></b>がクリックされました。`; } }); // // create Format menu (uses command property) let menuFormat = new input.Menu('#menu-format', { header: '書式', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.formatMenu, command: getFormatMenuCommand() }); // // toggle animations document.querySelector('#isAnimated').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.isAnimated = e.target.checked; }); }); // // toggle open on hover document.querySelector('#openOnHover').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.openOnHover = e.target.checked; }); }); // // show right-to-left menus document.querySelector('#rtl').addEventListener('click', e => { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); }); // // format menu command function getFormatMenuCommand() { return { executeCommand: (param) => { switch (param.prop) { case 'face': targetStyle.fontFamily = param.header; break; case 'font': switch (param.header) { case '太字': targetStyle.fontWeight = targetStyle.fontWeight ? '' : 'bold'; break; case '斜体': targetStyle.fontStyle = targetStyle.fontStyle ? '' : 'italic'; break; case '下線': targetStyle.textDecoration = targetStyle.textDecoration ? '' : 'underline'; break; case '大きいサイズ': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * 1.2) + 'px'; break; case '小さいサイズ': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * .8) + 'px'; break; } break; case 'color': targetStyle.color = param.header.toLowerCase(); break; case 'background': targetStyle.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param) => { switch (param.prop) { case 'face': return targetStyle.fontFamily != param.header; case 'font': switch (param.header) { case '大きいサイズ': return parseFloat(computedStyle.fontSize) < 24; case '小さいサイズ': return parseFloat(computedStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return targetStyle.color != color && targetStyle.backgroundColor != color; } return true; } }; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Hierarchical Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="menubar"> <div id="menu-file"></div> <div id="menu-edit"></div> <div id="menu-format"></div> </div> <p id="menuTarget"> 階層メニュー </p> <label> マウスホバーで開く <input id="openOnHover" type="checkbox" checked="checked"> </label> <label> アニメーション <input id="isAnimated" type="checkbox" checked="checked"> </label> <label> 右から左に表示 <input id="rtl" type="checkbox"> </label> </div> </body> </html>
// export function getMenuTree() { return { fileMenu: [ { header: '新規作成', items: [ { header: 'プロジェクト' }, { header: 'サイト' }, { header: 'ファイル' }, ] }, { header: '開く' }, { header: '保存' }, { header: '名前を付けて保存', items: [ { header: '通常のファイル' }, { header: '圧縮されたファイル' }, { header: '暗号化されたファイル' } ] }, { header: '-' }, { header: '終了' } ], editMenu: [ { header: '移動', items: [ { header: '行に移動' }, { header: '定義に移動' }, { header: 'ファイルに移動', items: [ { header: '現在のプロジェクト' }, { header: '現在のソリューション' }, { header: '選択...' }, ] }, ] }, { header: '検索と置換', items: [ { header: 'クイック検索' }, { header: 'クイック置換' }, { header: 'フォルダーを指定して検索' }, { header: 'フォルダーを指定して置換', items: [ { header: '置換' }, { header: 'すべて置換' }, ] }, ] }, { header: '-' }, { header: '元に戻す' }, { header: 'やり直し' } ], formatMenu: [ { header: 'フォント', items: [ { header: 'フォント名', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: '太字', prop: 'font' }, { header: '斜体', prop: 'font' }, { header: '下線', prop: 'font' }, { header: '-' }, { header: '大きいサイズ', prop: 'font' }, { header: '小さいサイズ', prop: 'font' } ] }, { header: 'テキストの色', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: '背景色', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; }
label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .wj-menu { padding: 6px 14px; border: none; background: transparent; } .wj-menu:hover, .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);