NS-Lib

Basic usage

Using context menus is really easy. You can add one to any HTML element, including the document body.

var myMenu = new ContextMenu(
    document.getElementById("some-div"),
    [
        {"text": "Action 1", "function": function1 },
        {"text": "Action 2", "function": function() { /* do something */ } },
        {"text": "Action 3", "function": function3 }
    ]
);

Separators

Separators allow you to group actions together. Try it out in the box below:

Separators are created by adding an element with type: separator inside your list of menu items

var myMenu = new ContextMenu(
    document.getElementById("some-div"),
    [
        {"text": "Action 1", "function": function1 },
        {"text": "Action 2", "function": function2 },
        {"type": "separator"},
        {"text": "Action 3", "function": function3 },
        {"text": "Action 4", "function": function4 }
    ]
);

Checks

Checks allow you to add checkboxes to your context menus. Check it out:

You can add a checkbox to your menu by specifying type: check inside your list of menu items

var myMenu = new ContextMenu(
    document.getElementById("some-div"),
    [
        {"type": "check", "text": "Enable option 1", "function": function1},
        {"type": "check", "text": "Enable option 2", "function": function2}
    ]
);

function function1(isChecked) {
    if (isChecked)
        alert("Box is checked");
    else
        alert("Box is unchecked");
}