[Menu] 階層メニュー

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h1>階層メニュー</h1>
  <p>サブメニューを含む階層的なメニューを表示します。また、メニュー項目の上にマウスを移動したときにメニューを開くことができます。</p>
  <input id="openOnHover" type="checkbox" checked>
  <label for="openOnHover">マウスホバーでメニューを開く</label>
  <div class="menubar">
    <div id="menuFile"></div>
    <div id="menuEdit"></div>
    <div id="menuFormat"></div>
  </div>

</div>

CSS

.menubar {
  background: #f8f8f8;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
}
.wj-menu {
  padding: 4px 0;
  border: none;
  background: transparent;
}
.wj-menu .wj-input-group .wj-input-group-btn {
  display: none;
}
#text {
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 4px;
  padding: 4px 8px;
  width: 30rem;
}

JavaScript

var menuFile = new wijmo.input.Menu('#menuFile', {
  itemsSource: [
    {
      header: '新規作成', items: [
        { header: 'プロジェクト' },
        { header: 'サイト' },
        { header: 'ファイル' },
      ]
    },
    { header: '開く' },
    { header: '保存' },
    {
      header: '名前を付けて保存', items: [
        { header: '通常のファイル' },
        { header: '圧縮されたファイル' },
        { header: '暗号化されたファイル' }
      ]
    },
    { header: '-' },
    { header: '終了' }
  ],
  header: 'ファイル',
  displayMemberPath: 'header',
  subItemsPath: 'items',
  openOnHover: true,
  itemClicked: function (s, e) {
  	alert('「' + s.text + '」メニューが選択されました。');
  }
});

var menuEdit = new wijmo.input.Menu('#menuEdit', {
  itemsSource: [
    {
      header: '移動', items: [
        { header: '行に移動' },
        { header: '定義に移動' },
        {
          header: 'ファイルに移動', items: [
            { header: '現在のプロジェクト' },
            { header: '現在のソリューション' },
            { header: '選択...' },
          ]
        },
      ]
    },
    {
      header: '検索と置換', items: [
        { header: 'クイック検索' },
        { header: 'クイック置換' },
        { header: 'フォルダーを指定して検索' },
        {
          header: 'フォルダーを指定して置換', items: [
            { header: '置換' },
            { header: 'すべて置換' },
          ]
        },
      ]
    },
    { header: '-' },
    { header: '元に戻す' },
    { header: 'やり直し' }
  ],
  header: '編集',
  displayMemberPath: 'header',
  subItemsPath: 'items',
  openOnHover: true,
  itemClicked: function (s, e) {
  	alert('「' + s.text + '」メニューが選択されました。');
  }
});

var menuFormat = new wijmo.input.Menu('#menuFormat', {
  itemsSource: [
    {
      header: 'フォント', items: [
        {
          header: 'フォント名', items: [
            { header: 'Arial' },
            { header: 'Times' },
            { header: 'Courier' },
            { header: 'Verdana' },
            { header: 'Georgia' }
          ]
        },
        { header: '太字' },
        { header: '斜体' },
        { header: '下線' },
        { header: '-' },
        { header:...