jquery contextmenu plugin demo

jquery contextmenu plugin demo

by Rahul Gupta

HTML

<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700&subset=latin,cyrillic'
          rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/screen.css" type="text/css"/>
    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme.css" type="text/css"/>
    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme-fixes.css" type="text/css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
    <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/js/main.js" type="text/javascript"></script>

<span class="context-menu-one btn btn-neutral">right click me</span>

JavaScript

$(function () {

    $.contextMenu({
        selector: '.context-menu-one',
        /*callback: function (key, options) {   
        		console.log("key = ", key, "  options = ", options);
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);                        
            alert("Clicked on " + key + " on element " + options.$trigger.attr('id').substr(3));

        },*/
        callback: function(itemKey, opt, rootMenu, originalEvent) {
					console.log('itemKey = ',itemKey, " opt = ", opt, "  rootMenu = ", rootMenu, "  originalEvent = ", originalEvent);
        },
        items: {
            "edit": { "name": "Edit", "icon": "edit" },           
            "fold1": {
                "name": "Apply for Section",
                "items": {
                    "Section I": { "name": "Section I" },
                    "Section II": { "name": "Section II" },
                    "Section III": { "name": "Section III" }
                }
            },
            "fold2": {
                "name": "Sub group",
                "items": {
                    "fold1-key1": { "name": "Foo bar" },
                    "fold2": {
                        "name": "Sub group 2",
                        "items": {
                            "fold2-key1": { "name": "Sub group 1" },
                            "fold2-key2": { "name": "Sub group 2" },
                            "fold2-key3": { "name": "Sub group 3" }
                        }
                    },
                    "fold1-key3": { "name": "delta" }
                }
            },
            "fold1a": {
                "name": "Other group",
                "items": {
                    "fold1a-key1": { "name": "Other group1" },
                    "fold1a-key2": { "name": "Other group2" },
                    "fold1a-key3": { "name": "Other group3" }
                } }  }  }); });