Jquery Context Menu

by kusachi

HTML

<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css">
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="context-menu btn btn-neutral" data-info="A">
  Folder 1
</div>
<div class="context-menu btn btn-neutral" data-info="B">
  Folder 2
</div>

<div class="debug"></div>

CSS

.btn {
  width: 100px;
  height: 20px;
  background-color: #D0D0D0;
  border: 1px solid black;
  padding: 5px;
  margin-bottom:5px;
}

.debug {
  margin-top: 100px;
}

ul.context-menu-list.context-menu-root {
  width: 70px;
  background-color: #FFEfDE;
}
ul.context-menu-list.context-menu-root .context-menu-item{
  background-color: #FFEfDE;
}

JavaScript

$(function() {
  $.contextMenu({
    selector: '.context-menu',
    items: {
      key: {
        name: "New File",
        icon: "fa-download",
        callback: function(key, options) {
          $(".debug").html("New file clicked: "+$(this).data('info'));
          setTimeout(
            function() {
              $(".debug").html("");
            },
            2000
          );
        }, 
        events: {
            show: function(opt) {
                var $this = this;
                $.contextMenu.setInputValues(opt, $this.data());
            }
        }
      }
    }
  });
});