JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<script src="http://www.web-delicious.com/jquery-plugins-demo/wdContextMenu/src/Plugins/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://www.web-delicious.com/jquery-plugins-demo/wdContextMenu/css/contextmenu.css">
<body>
    <div id="target"  class="target">Right Click Here</div><br/><br/><br>thkrjlenf<br/><br/><br/>
    
    <a href="http://www.web-delicious.com/jquery-plugins-demo/wdContextMenu/sample.htm">source</a>
</body>

CSS

.target

    {

            border:solid 1px #ffccee;   

            padding:5px;

            background-color:Blue;

            color:#fff;

            display:inline;

    }

JavaScript

var option = { width: 150, items: [

                            { text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },

                            { text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },

                            { text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },

                            { type: "splitLine" },

                            { text: "Group One", icon: "sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [

                                { text: "Group Three", icon: "sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [

                                    { text: "Group3 Item One", icon: "sample-css/wi0062-16.gif", alias: "3-1", action: menuAction },

                                    { text: "Group3 Item Tow", icon: "sample-css/wi0063-16.gif", alias: "3-2", action: menuAction }

                                ]

                                },

                                { text: "Group Two Item1", icon: "sample-css/wi0096-16.gif", alias: "2-1", action: menuAction },

                                { text: "Group Two Item1", icon: "sample-css/wi0111-16.gif", alias: "2-3", action: menuAction },

                                { text: "Group Two Item1", icon: "sample-css/wi0122-16.gif", alias: "2-4", action: menuAction }

                            ]

                            },

                            { type: "splitLine" },

                            { text: "Item Four", icon: "sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },

                            { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [

                                { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },

                                { text: "Item Two",...