Demo - Menu

by El Khal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/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>
<div class="container">

  <h1>
    Menu
  </h1>

  <p>
    The Menu control extends the ComboBox to add features 
    like a non-editable header, an <b>itemClicked</b> event,
    and commands.</p>
  <p>
    The simplest way to use the Menu control is by populating
    the Menu via its <b>itemsSource</b> property and handling 
    the <b>itemClicked</b> event. The event handler can inspect
    the menu's <b>selectedItem</b> property to determine which
    item was clicked and take the appropriate action.</p>

  <div id="menuFile">
    File
    <div>
      <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
      <b>New</b>
      <br>
      <small><i>create a new file</i></small></div>
    <div>
      <span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;
      <b>Open</b> <button onclick="alert(55);">?</button>
      <br>
      <small><i>open an existing file or folder</i></small></div>
    <div>
      <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;
      <b>Save</b>
      <br>
      <small><i>save the current file</i></small></div>
    <div class="wj-separator"></div>
    <div>
      <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;
      <b>Exit</b>
      <br>
      <small><i>exit the application</i></small></div>
  </div>
  <div id="menuEdit">
    Edit
    <div>
      <span class="glyphicon glyphicon-scissors"></span>&nbsp;&nbsp;
      <b>Cut</b>
      <br>
      <small><i>move the current selection to the clipboard</i></small>
    </div>
    <div>
      <span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;
      <b>Copy</b>
      <br>
  ...

CSS

.wj-dropdown {
  margin-bottom: 18px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create file and edit menus
  var menuFile = createMenu('menuFile');
  menuFile.itemClicked.addHandler(menuClick);
  var menuEdit = createMenu('menuEdit');
	menuEdit.itemClicked.addHandler(menuClick);

	// use the same event handler for both
  function menuClick(s, e) {
  	var msg = wijmo.format('You selected option **{selectedIndex}** from menu **{header}**', s);
    alert(msg);
	}

	// create menu from markup
  function createMenu(elementId) {

  	// get host element, header, items
    var host = document.getElementById(elementId);
    var header = host.firstChild.textContent.trim();
    var items = host.querySelectorAll('div');
    var menuItems = [];
    for (var i = 0; i < items.length; i++) {
    	var item = items[i];
      menuItems.push(item.outerHTML);
		}

		// clear host and instantiate menu
    host.innerHTML = '';
    var menu = new wijmo.input.Menu(host, {
    	header: header,
      itemsSource: menuItems
		});

    // done, return menu
    return menu;
	}
}