English Version

The context menu is generated when you click the right mouse button on a specific element.
When you select each menu, or click outside of the area where the menu closes.

Try to create the context menu in the following order.

How to create the context menu

[Step 1] The following three script files to include in the html page.

....
<script type="text/javascript" src="code-snippet.js"></script>
<script type="text/javascript" src="component-floatinglayer.js"></script>
<script type="text/javascript" src="component-contextmenu.js"></script>
....

[Step 2] Add tags required to create the context menu.

<!-- Tag to pop up the context menu -->
<div id="fl"></div>

<!-- Tag to create the context menu -->
<div id="target"></div>

[Step 3] Create a instance of ContextMenu.

var menu = new tui.component.ContextMenu(document.querySelector('#fl'));

[Step 4-1] Set the data to create the context menu.

• title : string Each menu name
• command : string Key value of each menu (optional)
• seperator : boolean Whether to use menu separators (optional)
• menu : Array.<object> Submenu of each menu (optional)

var menuData = [
    {title: 'open'},
    {separator: true},
    {
        title: 'export',
        menu: [
            {title: 'png'},
            {title: 'jpg', command: 'exportToJPG'}
        ]
    }
]

[Step 4-2] Declare a callback function for the custom event.

function handleClick(e, cmd) {
    console.log(cmd); // title or command value of menu data
}

[Step 4-3] Pass the following parameter to add the context menu.

• arguments[0] : string Element selector to create the context menu
• arguments[1] : function Callback function for the custom event
• arguments[2] : Array Menu data

menu.register('#target', handleClick, menuData);

You can see the action from Sample Page.

How to remove the context menu

If you remove the menu only

menu.unregister('#target');

If you want to remove the object

menu.destroy();