JS元件Bootstrap ContextMenu右鍵選單使用方法_javascript技巧

今天來總結下bootstrap的一個小組件的應用。好了，不說廢話，進入正題吧。

一、ContextMenu介紹

一個需求：表格行調序，支援多選調序，並且可以不連續多選。什麼意思呢？先來看看需要達成的效果圖：

需求是：需要將選取的6、8、9行移到第2行和第3行之間。撇開業務不說，單純從技術層面來說，要想使用最少操作達到上述效果，博主想到了右鍵功能，如果能夠在第2行或者第3行上面點擊滑鼠右鍵，透過右鍵選單功能將選中的行移動到對應的位置，這樣是不是最簡單。說做咱就做，於是找元件，搜尋「bootstrap 右鍵選單」。最後找到了我們的ContextMenu組件，仔細研究之後，覺得效果還行，所以在此分享出來供需要使用的園友參考。

ContextMenu開源位址：https://github.com/sydcanem/bootstrap-contextmenu

ContextMenu使用Demo：http://sydcanem.com/bootstrap-contextmenu/

二、ContextMenu效果

初始右鍵效果

運用到專案中

執行選單功能後

三、ContextMenu程式碼範例
其實就這麼一個簡單的東東，我們來看看如何使用它。

1、引用對應的文件。關鍵的就兩個bootstrap-contextmenu.js和prettify.js

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/boostrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

2、html準備

  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li><a tabindex="-1" href="#" operator="top">插入此行上面</a></li>
      <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
    </ul>
  </div>

3、JS初始化

 程式碼不難，就是些表格行運算的邏輯。需要說明的地方：

（1）表格行執行remove和insert之後，需要重新初始化右鍵選單功能，否則，右鍵一次之後，就不再運作。

（2）如果選單功能項目比較多，則需要使用分割線來分組。只需要加

就能搞定。

<div id="context-menu2">
     <ul class="dropdown-menu" role="menu">
       <li><a tabindex="-1">Action</a></li>
       <li><a tabindex="-1">Another action</a></li>
       <li><a tabindex="-1">Something else here</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1">Separated link</a></li>
     </ul>
    </div>

（3）如果想要實現滑鼠移動到選單上面顯示藍色背景，則需要引用另一個css檔案即可。

複製程式碼 程式碼如下:

http://netdna.bstrapcdnna.bstrapc .com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

效果如下：

以上就是bootstrap-ContextMenu元件的一些簡單用法。可能不夠完美，但是對於一般的右鍵選單需求能很好的解決。