JS組件系列——Bootstrap右鍵菜單解決方案：ContextMenu

前言：有段時間沒發表隨筆了，過個年人都變得懶了。新年剛來上班，今天正好得空，將去年遺留的兩個小組件總結記錄下。有朋友跟我說：你的bootstrap組件要可以造成一個能夠知足通常項目需求的系列組件，纔有真正的實用價值。想一想說得在理。這不今天來總結下bootstrap的一個小組件的應用。好了，不說廢話，進入正題吧。

1、ContextMenu介紹

年前，博主接到一個需求：表格行調序，支持多選調序，而且能夠不連續多選。什麼意思呢？先來看看須要實現的效果圖：

需求是：須要將選中的六、八、9行移動到第2行和第3行之間。撇開業務不說，單純從技術層面來講，要想使用最少操做達到上述效果，博主想到了右鍵功能，若是可以在第2行或者第3行上面點擊鼠標右鍵，經過右鍵菜單功能將選中的行移動到相應的位置，這樣是否是最簡單呢。說作咱就作，因而找組件，搜索「bootstrap 右鍵菜單」。最終找到了咱們的ContextMenu組件，仔細研究以後，以爲效果還行，因此在此分享出來供須要使用的園友參考。

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

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

2、ContextMenu效果

初始右鍵效果

運用到項目中

執行菜單功能後

3、ContextMenu代碼示例

其實就這麼一個簡單的東東，咱們來看看如何使用它。

一、引用相應的文件。關鍵的就兩個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>

二、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>

三、JS初始化

代碼不難，就是些表格行操做的邏輯。須要說明的地方：

（1）表格行執行remove和insert以後，須要從新初始化右鍵菜單功能，不然，右鍵一次以後，就再也不起做用。

（2）若是菜單功能項比較多，須要使用分割線來分組。只須要加<li class="divider"></li>就能搞定。

　　　　<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文件便可。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

效果以下：

4、總結

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