htmlelement-contextmenu

constructor

make a new instance of context menu.

new ContextMenu(menuInfo)

menuInfo

object menuInfo {

menuId: html id of the menu

targetId: id of the html element on which the context menu should be created

showAccessKey: bool to show shortcut in context menu

beforeShowing: function called before showing context menu. This function can update items before showing

items: array of menuItems

}

object menuItem {

key: html id of the menu item

label: Text of menu item

class: Css class of menu item

fn: function to call when the menu item is selected

accesskey: shortcut key to select the menu item

showing: function call to determine the css class of menu item WHEN showing menu

disabled: bool to active or inactive the menu item

}


        <div id="myMenu">right click here</div>

        <script>
        var ContextMenu = {
          menuId:document.querySelector("#myMenu"),
          items: [{
            key: "cut",
            label: "cut",
            fn: () => console.log("cut")
          }]
        };
        var menu = new ContextMenu(menuInfo);
      </script>

insertItem

insertItem(menuItem, position)

menuItemsee below

positionindex of menuItem position in the menu

insert a menuItem in a menu at position


        var menu = new ContextMenu(menuInfo);
        menu.insertItem({},2);

removeItem

removeItem(menuItem)

menuItemmenuItem to remove in the contextMenu

Remove a menuItem outside the menu


        var menu = new ContextMenu(menuInfo);
        var menuInfo = menuInfo.items[2];
        menu.removeItem(menuInfo);

Usage


      <link rel="stylesheet" href="node_modules/htmlelement-contextmenu/distrib/htmlelement-contextmenu.min.css" />
      <script src="node_modules/htmlelement-contextmenu/distrib/htmlelement-contextmenu.min.js"></script>

      <div id="div1">right click here</div>
      <script>
        var menuInfo = {
          menuId: "menu1",
          targetId: "#div1",
          items: [{
            key: "cut",
            label: "cut",
            fn: () => console.log("cut")
          }, {
            label: "sep"
          }, {
            key: "copy",
            label: "Copy",
            fn: () => console.log("copy")
          }, {
            key: "paste",
            label: "Paste",
            showing: () => {
              let val = document.querySelector("#t1");
              return (val.value < 5) ? "cmDisabled" : "-cmDisabled";
            },
            fn: () => console.log("paste")
          }]
        };

        var menu = new ContextMenu(menuInfo);
      </script>

object menuInfo {
menuId:	html id of the menu
targetId:	id of the html element on which the context menu should be created
showAccessKey:	bool to show shortcut in context menu
beforeShowing:	function called before showing context menu. This function can update items before showing
items:	array of menuItems
}

object menuItem {
key:	html id of the menu item
label:	Text of menu item
class:	Css class of menu item
fn:	function to call when the menu item is selected
accesskey:	shortcut key to select the menu item
showing:	function call to determine the css class of menu item WHEN showing menu
disabled:	bool to active or inactive the menu item
}

htmlelement-contextmenu

constructor

insertItem

removeItem

popup

Usage