页面的head部分，需引入jQuery库和右键菜单插件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.contextmenu.r2.js"></script>

页面的body部分，用了多个div容器和ul无序列表来装载不同的菜单内容，代码如下：

<div class="demo1" style="color:green;"> 右键点此 </div>
<hr />
<div id="demo2"> 右键点此 </div>
<hr />
<div class="demo3" id="dontShow"> 不显示 </div>
<hr />
<div class="demo3" id="showOne"> 显示第一项 </div>
<hr />
<div class="demo3" id="showAll"> 显示全部 </div>
<hr />
<!--右键菜单的源-->
<div class="contextMenu" id="myMenu1">
  <ul>
    <li id="open"> 健康</li>
    <li id="email"> 快乐</li>
    <li id="save"> 财富</li>
    <li id="delete"> 自由</li>
  </ul>
</div>
<div class="contextMenu" id="myMenu2">
  <ul>
    <li id="item_1"> 健康</li>
    <li id="item_2"> 快乐</li>
    <li id="item_3"> 财富</li>
    <li id="item_4"> 自由</li>
  </ul>
</div>
<div class="contextMenu" id="myMenu3">
  <ul>
    <li id="item_1"> 健康</li>
    <li id="item_2"> 快乐</li>
    <li id="item_3"> 财富</li>
  </ul>
</div>

页面的底部，需设置好不同演示效果的相应参数，代码如下：

//所有class为demo1的span标签都会绑定此右键菜单
$('div.demo1').contextMenu('myMenu1', {
  bindings: {
    'open': function(t) {
      alert('Trigger was '+t.id+'\nAction was Open');
    },
    'email': function(t) {
      alert('Trigger was '+t.id+'\nAction was Email');
    },
    'save': function(t) {
      alert('Trigger was '+t.id+'\nAction was Save');
    },
    'delete': function(t) {
      alert('Trigger was '+t.id+'\nAction was Delete');
    }
  }
});
//所有html元素id为demo2的绑定此右键菜单
$('#demo2').contextMenu('myMenu2', {
  //菜单样式
  menuStyle: {
    border: '2px solid #000'
  },
  //菜单项样式
  itemStyle: {
    fontFamily : 'verdana',
    backgroundColor : 'green',
    color: 'white',
    border: 'none',
    padding: '2px 10px'
  },
  //菜单项鼠标放在上面样式
  itemHoverStyle: {
    color: 'blue',
    backgroundColor: 'red',
    border: 'none'
  },
  //事件    
  bindings: {
    'item_1': function(t) {
      alert('Trigger was '+t.id+'\nAction was item_1');
    },
    'item_2': function(t) {
      alert('Trigger was '+t.id+'\nAction was item_2');
    },
    'item_3': function(t) {
      alert('Trigger was '+t.id+'\nAction was item_3');
    },
    'item_4': function(t) {
      alert('Trigger was '+t.id+'\nAction was item_4');
    }
  }
});
//所有div标签class为demo3的绑定此右键菜单
$('div.demo3').contextMenu('myMenu3', {
//重写onContextMenu和onShowMenu事件
  onContextMenu: function(e) {
    if ($(e.target).attr('id') == 'dontShow') return false;
    else return true;
  },
  onShowMenu: function(e, menu) {
    if ($(e.target).attr('id') == 'showOne') {
      $('#item_2, #item_3', menu).remove();
    }
    return menu;
  }
});