ContextMen 實際執行畫面

ContextMen 是一個輕量級的 jQuery 套件，可以讓你有選擇性的重寫瀏覽器的右鍵選單功能，並且能夠自定義右鍵選單的內容。


使用方法：
首先載入必要的程式檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//載入主程式碼
<script src="/jquery.contextmenu.r2.packed.js" type="text/javascript"></script>
HTML作用右鍵選單區域程式碼
<span class="demo" id="dontShow" style="padding: 5px; background-color:pink">Don't show menu</span>
<span class="demo" id="showOne" style="padding: 5px;background-color:lightgreen">Just first item</span>
<span class="demo" id="showAll" style="padding: 5px;background-color:lightblue">Show all</span>
HTML的選單部分程式碼
 <div class="contextMenu" id="myMenu">
    <ul>
      <li id="item_1">Item 1</li>
      <li id="item_2">Item 2</li>
      <li id="item_3">Item 3</li>
    </ul>
  </div>

最後加入 JavaScript 的程式碼就完成了
 $('span.demo').contextMenu('myMenu', {
      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;
      }
 });

附上可供修改參數

屬性	說明
bindings	作用對象元素 可以是ID Class 或網頁元素
menuStyle	選單的 style
itemStyle	選單個別物件 style
itemHoverStyle	選單個別物件的 hover style
shadow	選單上產生陰影
eventPosX	允許可以用右鍵選單的作用區域 X 軸
eventPosY	允許可以用右鍵選單的作用區域 Y 軸
onContextMenu(event)	選單秀出前執行
onShowMenu(event, menu)	按下表單物件後執行.可設並個別表單

作者網站：http://www.trendskitchens.co.nz/jquery/contextmenu/
檔案大小：2.5 KB
檔案下載：http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
檔案備份：下載