快捷導(dǎo)航

JS組件Bootstrap ContextMenu右鍵菜單使用方法

更新時(shí)間：2016年04月17日 14:54:26 作者：懶得安分

這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap ContextMenu右鍵菜單使用方法，感興趣的小伙伴們可以參考一下

今天來總結(jié)下bootstrap的一個(gè)小組件的應(yīng)用。好了，不說廢話，進(jìn)入正題吧。

一、ContextMenu介紹

一個(gè)需求：表格行調(diào)序，支持多選調(diào)序，并且可以不連續(xù)多選。什么意思呢？先來看看需要實(shí)現(xiàn)的效果圖：

需求是：需要將選中的6、8、9行移動(dòng)到第2行和第3行之間。撇開業(yè)務(wù)不說，單純從技術(shù)層面來說，要想使用最少操作達(dá)到上述效果，博主想到了右鍵功能，如果能夠在第2行或者第3行上面點(diǎn)擊鼠標(biāo)右鍵，通過右鍵菜單功能將選中的行移動(dòng)到相應(yīng)的位置，這樣是不是最簡(jiǎn)單呢。說做咱就做，于是找組件，搜索“bootstrap 右鍵菜單”。最終找到了我們的ContextMenu組件，仔細(xì)研究之后，覺得效果還行，所以在此分享出來供需要使用的園友參考。

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

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

二、ContextMenu效果

初始右鍵效果

運(yùn)用到項(xiàng)目中

執(zhí)行菜單功能后

三、ContextMenu代碼示例
其實(shí)就這么一個(gè)簡(jiǎn)單的東東，我們來看看如何使用它。

1、引用相應(yīng)的文件。關(guān)鍵的就兩個(gè)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準(zhǔn)備

 <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）表格行執(zhí)行remove和insert之后，需要重新初始化右鍵菜單功能，否則，右鍵一次之后，就不再起作用。

（2）如果菜單功能項(xiàng)比較多，需要使用分割線來分組。只需要加<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）如果想要實(shí)現(xiàn)鼠標(biāo)移動(dòng)到菜單上面顯示藍(lán)色背景，則需要引用另一個(gè)css文件即可。

復(fù)制代碼代碼如下:

<link href="

效果如下：