Bootstrap ContextMenu 右键菜单组件集成与使用指南

Bootstrap ContextMenu 右键菜单组件集成与使用指南

本文旨在总结 Bootstrap 中一个实用组件的具体应用方法。

ContextMenu 组件概述

一、ContextMenu 组件概述

首先明确一个具体需求：实现表格行的排序功能，支持多选且允许不连续选择。具体效果如下图所示：

业务需求是将选中的第 6、8、9 行移动至第 2 行与第 3 行之间。从技术实现角度，为简化操作流程，博主考虑利用右键菜单功能：在目标位置（第 2 或第 3 行）点击鼠标右键，通过弹出的菜单将已选中的行移动至指定位置。经搜索“bootstrap 右键菜单”，最终选定 ContextMenu 组件，经测试效果符合要求，现分享此方案供参考。

ContextMenu 开源项目地址：https://github.com/sydcanem/bootstrap-contextmenu

ContextMenu 在线演示地址：http://sydcanem.com/bootstrap-contextmenu/

ContextMenu 效果展示

二、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. JavaScript 初始化配置

代码逻辑主要涉及表格行的操作，需注意以下关键点：

（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">

应用该 CSS 后的效果如下：

如需深入学习，可参考相关 Bootstrap 学习教程及实战专题。

以上为 bootstrap-ContextMenu 组件的基本用法。尽管并非完美无缺，但足以满足大多数常规右键菜单的需求。