Javascript contextmenu

Integrate a simple javascript contextmenu in your web based application.


1

Examples

Contextmenu associate in the boxes below


Contextmenu as a webcomponent

About CTRL+A
Go to jexcel pro website

Other option

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<jsuites-contextmenu id='contextmenu-webcomponent'>
  <div onclick="alert('About is clicked')">About <span>CTRL+A</span></div>
  <div onclick="window.open('https://jexcel.net/v4')">Go to jexcel pro website</div>
  <hr>
  <div>Other option without action</div>
</jsuites-contextmenu>

<div aria-contextmenu-id="contextmenu-webcomponent" class="border:1px solid gray;width:400px;height:300px;"></div>
</html>

Contextmenu as a plugin


<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id='container' style='border:1px solid gray;width:400px;height:300px;'></div>

<div id='contextmenu'></div>

<script>
var contextMenu = jSuites.contextmenu(document.getElementById('contextmenu'), {
    items:[
        {
            title:'Copy',
            shortcut:'Ctrl + C',
            onclick:function() {
                alert('Copy');
            }
        },
        {
            type:'line'
        },
        {
            title:'Visit the website',
            onclick:function() {
                window.open('https://bossanova.uk/jexcel/v3/examples');
            }
        },
        {
            title:'About',
            onclick:function() {
                alert('jSuites v2')
            }
        },
    ],
    onclick:function() {
        contextMenu.close(false);
    }
});

document.getElementById('container').addEventListener("contextmenu", function(e) {
    contextMenu.open(e);
    e.preventDefault();
});
</script>
</html>

NOTE: The property id is mandatory in the element