[Menu] マウス移動時にメニューを閉じない

by Wijmo5_jp

HTML

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

  <h1>マウス移動時にメニューを閉じない</h1>
  <p>Menu.closeOnLeaveプロパティが追加され、Menu.openOnHoverプロパティをtrueに設定した際に、マウスがメニューから離れたときにメニューを閉じるかどうかを指定できるようになりました。</p>
  <input type="checkbox" id="closeOnLeave" onchange="update()">
  <label for="closeOnLeave">マウス移動時に自動的にメニューを閉じる</label><br>
  <div id="menu"></div>

</div>

JavaScript

var menu = new wijmo.input.Menu('#menu', {
  header: 'ファイル',
  displayMemberPath: 'header',
  subItemsPath: 'items',
  openOnHover: true,
  closeOnLeave: false,
  itemsSource: [
    {
      header: '新規作成',
      items: [
        { header: 'プロジェクト' },
        { header: 'サイト' },
        { header: 'ファイル' },
      ]
    },
    { header: '開く' },
    { header: '保存' },
    {
      header: '名前を付けて保存',
      items: [
        { header: '通常のファイル' },
        { header: '圧縮されたファイル' },
        { header: '暗号化されたファイル' }
      ]
    },
    { header: '-' },
    { header: '終了' }
  ]
});
function update() {
  menu.closeOnLeave = document.getElementById('closeOnLeave').checked;
}