JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://draftrr.com/static/css/bootstrap.css">
<link rel="stylesheet" href="http://jakiestfu.com/forrst/context/context.css">
<script src="http://jakiestfu.com/forrst/context/context.js"></script>
<input type="button" id="attach" value="Attach Contextual Menu">
<input type="button" id="destroy" value="Destroy Contextual Menu">
<div id="box">Right Click Me</div>
CSS
body{
padding:20px;
}
#box{
background:#eee;
border:1px solid #ddd;
padding:50px;
color:#999;
font-family:arial;
text-align:center;
margin-top:20px;
margin-top:200px;
}
JavaScript
context.init();
$(document).on('click', '#attach', function () {
context.attach('#box', [{
text: 'Action 1',
action: function () {
alert('Clicked Action 1!');
}
}, {
text: 'Action 2',
action: function () {
alert('Clicked Action 2');
}
}]);
});
$(document).on('click', '#destroy', function () {
context.destroy('#box');
});