jQuery contextMenu 右鍵選單

使用 jQuery 框架簡單方便的網頁右鍵選單 contextMenu，可以很容易地曾下上下文的右鍵選單，在任何的網頁程序上面，可以讓網頁看起來更像在使用應用程式的感覺。支援鍵盤控制且可無限量的產生自訂的子選單，可使用禁用項目增加和刪除項目讓選單刷新，支援右鍵或左鍵單及控制多元素可共享選單，個別選單可自訂一回調函式。

使用方法：
第一步 載入 contextMenu 所需要用到的 JavaScript 和 CSS 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery contextMenu 的主程式碼 -->
<script type="text/javascript" src="js/jquery.contextmenu.js"></script>
<!-- jQuery contextMenu 的 CSS 設計檔-->
<link rel="stylesheet" type="text/css" href="css/jquery.contextmenu.css" />

第二步 設計右鍵選單的 HTML 內容
<div id="simpleCallbackMenu">
      <ul>
         <li id="MenuItem1"><img src="images/icon1.png" /><a href="#Item1">第一層選單1</a></li>
         <li id="MenuItem2"><a href="#Item2">第一層選單2</a></li>
         <li id="MenuItem3"><a href="#Item3">第一層選單3</a>
            <ul>
               <li id="MenuItem3.1"><a href="#Item3.1">第二層選單1</a></li>
               <li id="MenuItem3.2"><a href="#Item3.2">第二層選單2</a></li>
               <li id="MenuItem3.3"><a href="#Item3.3">第二層選單3</a>
                  <ul>
                     <li id="MenuItem3.3.1"><a href="#Item3.3.1">第三層選單1</a></li>
                     <li id="MenuItem3.3.2"><a href="#Item3.3.2">第三層選單2</a></li>
                     <li id="MenuItem3.3.3"><a href="#Item3.3.3">第三層選單3</a></li>
                     <li id="MenuItem3.3.4"><a href="#Item3.3.4">第三層選單4</a></li>
                  </ul>
               </li>
               <li id="MenuItem3.4"><a href="#Item3.4">Menu Item 3.4</a></li>
            </ul>
         </li>
         <li id="MenuItem4" class="separator"><a href="#Item4">Menu Item 4</a></li>
      </ul>
   </div>

第三步 使用 JavaScript 讓 contextMenu 初始化
$(function(){
   $("#simpleCallback").contextMenu({
      menu : 'simpleCallbackMenu'
   });
});

附上 contextMenu 可修改參數設定

參數	屬性	說明
mouseButton	字串	選單顯示的方向可設定為 left,right
minWidth	數字	最小寬度
maxWidth	數字	最大寬度 0 為不設限制
delay	數字	選單延遲消失的時間單位為毫秒
keyboard	布林	是否可使用鍵盤控制
hoverIntent	布林	是否使用 hoverIntent 套件
onSelect	函式	選單選擇時執行
onLoad	函式	選單建構完成時執行
onShow	函式	選單顯示時執行
onHide	函式	選單隱藏時執行

作者網站：http://www.class.pm/
檔案大小：33.3 KB
檔案下載：http://www.class.pm/files/jquery/jquery.contextmenu/jquery.contextmenu-1.0.0.zip
檔案備份：下載