Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="jQuery.contextMenu fiddle" />
  <meta charset=utf-8 />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.ui.position.js"></script>
  <script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
  <link rel="Stylesheet" href="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.css" />
  <style>
    html, body { height: 100%; }
    /* hide whitespace between inline-block elements */
    .inline-spaces { font-size: 0; }
    .inline-spaces > * { font-size: 11px; }
    
    /* demo trigger boxes */
    .box {
        color: #EEE;
        background: #666;
        font-weight: bold;
        padding: 20px;
        text-align: center;
        font-size: 20px;
        margin: 5px 0;
    }
    .box:hover {
        background: #777;
    }
    .box > * {
        display:block;
    }
    .menu-injected { background-color: #C87958; }
    .box.context-menu-disabled { background-color: red; }
  </style>
  <title>jQuery Context Menu</title>
</head>
<body>
  <script>
    $(function(){
      $.contextMenu({
          selector: '.context-menu-one', 
          callback: function(key, options) {
              var m = "clicked: " + key;
              window.console && console.log(m) || alert(m); 
          },
          items: {
              "edit": {name: "Edit", icon: "edit"},
              "show": {name: "Show", icon: "cut"},
              "watch": {name: "Watch", icon: "copy"},
              "quit": {name: "Quit", icon: "quit"}
          }
      });
  
  });
  </script>
  <div class="context-menu-one box menu-1">
    <strong>right click me</strong>
  </div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rodneyrehmpro
0viewers