階層メニュー

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.background != 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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, ElementRef, NgModule, Inject, ViewChild, OnInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService, TMenuTree, TMenuItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements OnInit { @ViewChild('menuTarget') private _menuTarget: ElementRef; // element used to show menu commands @ViewChild('fileMenu') private _fileMenu: input.Menu; @ViewChild('editMenu') private _editMenu: input.Menu; @ViewChild('formatMenu') private _formatMenu: input.Menu; private _rtl = false; // menuTree: TMenuTree; isAnimated = true; openOnHover = true; // constructor(@Inject(DataService) private dataService: DataService) { this.menuTree = dataService.getMenuTree(); } // get rtl(): boolean { return this._rtl; } set rtl(value: boolean) { let menubar = <HTMLElement>document.querySelector('.menubar'); menubar.setAttribute('dir', (this._rtl = value) ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } // ngOnInit() { this._fileMenu.itemClicked.addHandler(this.menuItemClicked.bind(this)); this._editMenu.itemClicked.addHandler(this.menuItemClicked.bind(this)); this._formatMenu.command = this.formatMenuCommand; } // menuItemClicked(menu: input.Menu) { this._menuTarget.nativeElement.innerHTML = `<b><i>${menu.text}</i></b>がクリックされました。`; } // formatMenuCommand = { executeCommand: (param: TMenuItem) => { let ts = this._menuTarget.nativeElement.style; let cs = getComputedStyle(this._menuTarget.nativeElement); // switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case '太字': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case '斜体': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case '下線': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case '大きいサイズ': ts.fontSize = (parseFloat(cs.fontSize) * 1.2) + 'px'; break; case '小さいサイズ': ts.fontSize = (parseFloat(cs.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param: TMenuItem) => { let ts = this._menuTarget.nativeElement.style; let cs = getComputedStyle(this._menuTarget.nativeElement); // switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case '大きいサイズ': return parseFloat(cs.fontSize) < 24; case '小さいサイズ': return parseFloat(cs.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } } } // @NgModule({ imports: [WjInputModule, FormsModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!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"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="menubar"> <wj-menu #fileMenu [header]="'ファイル'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.fileMenu"> </wj-menu> <wj-menu #editMenu [header]="'編集'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.editMenu"> </wj-menu> <wj-menu #formatMenu [header]="'書式'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.formatMenu"> </wj-menu> </div> <p #menuTarget id="menuTarget"> 階層メニュー </p> <label> マウスホバーで開く <input type="checkbox" [(ngModel)]="openOnHover"> </label> <label> アニメーション <input type="checkbox" [(ngModel)]="isAnimated"> </label> <label> 右から左に表示 <input type="checkbox" [(ngModel)]="rtl"> </label> </div> import { Injectable } from '@angular/core'; // export type TMenuItem = { header: string; prop?: string; items?: TMenuItem[] } // export type TMenuTree = { [key: string]: TMenuItem[] } // @Injectable() export class DataService { getMenuTree() { return <TMenuTree>{ 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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getMenuTree } from './data'; // class App extends React.Component { constructor(props) { super(props); this._menuTree = getMenuTree(); this._menuTarget = null; this.state = { isAnimated: true, openOnHover: true }; } render() { return <div className="container-fluid"> <div className="menubar"> <wjInput.Menu id="fileMenu" header="ファイル" displayMemberPath="header" subItemsPath="items" showDropDownButton={false} openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.fileMenu} itemClicked={this._menuItemClicked.bind(this)}> </wjInput.Menu> <wjInput.Menu id="editMenu" header="編集" displayMemberPath="header" subItemsPath="items" showDropDownButton={false} openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.editMenu} itemClicked={this._menuItemClicked.bind(this)}> </wjInput.Menu> <wjInput.Menu id="formatMenu" header="書式" displayMemberPath="header" subItemsPath="items" openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.formatMenu} initialized={this._initFormatMenu.bind(this)}> </wjInput.Menu> </div> <p id="menuTarget" ref="menuTarget"> 階層メニュー </p> <label> マウスホバーで開く <input type="checkbox" defaultChecked={this.state.openOnHover} onChange={e => { this._changeOpenOnHover(e.target.checked); }}/> </label> <label> アニメーション <input type="checkbox" defaultChecked={this.state.isAnimated} onChange={e => { this._changeAnimation(e.target.checked); }}/> </label> <label> 右から左に表示 <input type="checkbox" defaultChecked={false} onChange={e => { this._changeRtl(e.target.checked); }}/> </label> </div>; } componentDidMount() { this._menuTarget = this.refs.menuTarget; } _initFormatMenu(sender) { sender.command = { executeCommand: (param) => { let ts = this._menuTarget.style; let cssStyle = window.getComputedStyle(this._menuTarget, null); switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case '太字': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case '斜体': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case '下線': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case '大きいサイズ': ts.fontSize = (parseFloat(cssStyle.fontSize) * 1.2) + 'px'; break; case '小さいサイズ': ts.fontSize = (parseFloat(cssStyle.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param) => { let ts = this._menuTarget.style; let cssStyle = window.getComputedStyle(this._menuTarget, null); switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case '大きいサイズ': return parseFloat(cssStyle.fontSize) < 24; case '小さいサイズ': return parseFloat(cssStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } }; } _menuItemClicked(sender) { this._menuTarget.innerHTML = `<b><i>${sender.text}</i></b>がクリックされました。`; } _changeOpenOnHover(value) { this.setState({ openOnHover: value }); } _changeAnimation(value) { this.setState({ isAnimated: value }); } _changeRtl(value) { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', value ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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 id="app"></div> </body> </html> 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; } 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' } ] } ] }; } <template> <div class="container-fluid"> <div class="menubar"> <wj-menu id="fileMenu" :header="'ファイル'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.fileMenu" :itemClicked="menuItemClicked" :initialized="initMenu"></wj-menu> <wj-menu id="editMenu" :header="'編集'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.editMenu" :itemClicked="menuItemClicked" :initialized="initMenu"></wj-menu> <wj-menu id="formatMenu" :header="'書式'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.formatMenu" :initialized="initMenu"> </wj-menu> </div> <p id="menuTarget" ref="menuTarget"> 階層メニュー </p> <label> マウスホバーで開く <input type="checkbox" v-model="openOnHover"> </label> <label> アニメーション <input type="checkbox" v-model="isAnimated"> </label> <label> 右から左に表示 <input type="checkbox" @change="rtlChanged"> </label> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.grid'; import { getMenuTree } from './data'; let App = Vue.extend({ name: 'app', data: function() { return { menuTree: getMenuTree(), isAnimated: true, openOnHover: true, fileMenu: {}, editMenu: {}, formatMenu: {}, menuTarget: {} }; }, methods: { initMenu(menu) { this[menu.hostElement.id] = menu; }, menuItemClicked(menu) { this.menuTarget.innerHTML = `<b><i>${menu.text}</i></b>がクリックされました。`; }, formatMenuCommand(param) { let that = this; return { executeCommand: function(param){ let ts = that.menuTarget.style; let cssStyle = window.getComputedStyle(that.menuTarget, null); switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case '太字': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case '斜体': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case '下線': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case '大きいサイズ': ts.fontSize = (parseFloat(cssStyle.fontSize) * 1.2) + 'px'; break; case '小さいサイズ': ts.fontSize = (parseFloat(cssStyle.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: function(param){ let ts = that.menuTarget.style; let cssStyle = window.getComputedStyle(that.menuTarget, null); switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case '大きいサイズ': return parseFloat(cssStyle.fontSize) < 24; case '小さいサイズ': return parseFloat(cssStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } } }, rtlChanged(e) { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } }, mounted() { this.formatMenu.command = this.formatMenuCommand(); this.menuTarget = this.$refs.menuTarget; } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> 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; } .container-fluid .wj-menu { padding: 6px 14px; border: none; background: transparent; } .container-fluid .wj-menu:hover, .container-fluid .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .container-fluid .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; } </style> <!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.vue'); </script> </head> <body> <div id="app"></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' } ] } ] }; }