Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发,也可以配合Font Awesome字体图标一起使用,非常的方便。

安装

可以通过npm来安装Bootstrap Context Menu插件。

npm install bootstrap-menu                
              

使用方法

使用该右键上下文菜单插件需要引入Bootstrap相关依赖文件和jQuery以及BootstrapMenu.min.js文件

<script src="js/jquery.min.js"></script>
<script src="js/BootstrapMenu.min.js"></script>               
              
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化右键菜单。

var menu = new BootstrapMenu('#dropdownButton', {
    actions: /* ... */
});               
              

应用举例

BootstrapMenu的构造函数第一个参数接收一个字符串格式的元素选择器,第二个参数是一个options参数对象。

options对象必须至少有一个actions数组,数组中包含右键菜单的action。

var menu = new BootstrapMenu('#button', {
  actions: [{
      name: 'Action',
      onClick: function() {
        // run when the action is clicked
      }
    }, {
      name: 'Another action',
      onClick: function() {
        // run when the action is clicked
      }
    }, {
      name: 'A third action',
      onClick: function() {
        // run when the action is clicked
      }
  }]
});                
              

下面是一个在表格中使用右键菜单的例子:

<table>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <!-- the modal will open right-clicking anywhere inside a .demoTableRow -->
  <tr class="demoTableRow" data-row-id="1">
    <td>1</td>
    <td>First row</td>
    <td>Lorem ipsum dolor sit amet</td>
  </tr>
  <tr class="demoTableRow" data-row-id="2">
    <td>2</td>
    <td>Second row</td>
    <td>Nemo enim ipsam voluptatem quia voluptas</td>
  </tr>
  <tr class="demoTableRow" data-row-id="3">
    <td>3</td>
    <td>Third row</td>
    <td>Ut enim ad minima veniam</td>
  </tr>
</table>                
              
/* A centralized container of the table data. You could hold the
 * row-specific data in a data-whatever-info="" attribute in each
 * row, you decide what fetchElementData() does!
 */
var tableRows = {
  '1': { name: 'First row', isEditable: true, isRemovable: true },
  '2': { name: 'Second row', isEditable: true, isRemovable: true },
  '3': { name: 'Third row', isEditable: true, isRemovable: true }
};

var menu = new BootstrapMenu('.demoTableRow', {
  /* $rowElem is the jQuery element where the menu was opened. The
   * returned value is the `row` argument passed to each function. */
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return tableRows[rowId];
  },
  /* group actions by their id to make use of separators between
   * them in the context menu. Actions not added to any group with
   * this option will appear in a default group of their own. */
  actionsGroups: [
    ['setEditable', 'setUneditable' ],
    ['deleteRow']
  ],
  /* you can declare 'actions' as an object instead of an array,
   * and its keys will be used as action ids. */
  actions: {
    editName: {
      name: 'Edit name',
      iconClass: 'fa-pencil',
      onClick: function(row) { /* ... */ },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    editDescription: {
      name: 'Edit description',
      iconClass: 'fa-pencil',
      onClick: function(row) { /* ... */ },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    setEditable: {
      name: 'Set editable',
      iconClass: 'fa-unlock',
      onClick: function(row) { /* ... */ },
      isShown: function(row) {
        return !row.isEditable;
      }
    },
    setUneditable: {
      name: 'Set uneditable',
      iconClass: 'fa-lock',
      onClick: function(row) { /* ... */ },
      isShown: function(row) {
        return row.isEditable;
      }
    },
    deleteRow: {
      name: 'Delete row',
      iconClass: 'fa-trash-o',
      onClick: function(row) { /* ... */ },
      isEnabled: function(row) {
        return row.isEditable && row.isRemovable;
      }
    }
  }
});                
              

配置参数

上下文菜单初始化参数:

参数 类型 描述
menuSource string What the source of the context menu should be when opened. Valid values are mouse and element. Defaults to mouse.
menuPosition string 上下文菜单的相对位置。可用值有:aboveLeft, aboveRight, belowLeft 和 belowRight。默认值为belowLeft。
menuEvent string 打开右键菜单的事件。可用值有:click, right-click, hover。默认值为right-click。
fetchElementData function 获取当前打开元素的数据,可以将它传入到用户第一的统一个action的函数中。
actions array|object 在上下文菜单中包含的actions列表的数组或对象。
actionsGroups array 将action进行分组,每组action之间只用横线进行分割

Actions 属性:

名称 类型 描述
name string|function action的名称
onClick function action被点击时执行的函数
iconClass string 可选,Font Awesome字体图标的class名称
classNames string|object|function 可选,添加到action的class
isShown function 可选,决定action在右键菜单中是否可见
isEnabled function 可选,决定action在右键菜单中是否可用

Bootstrap Context Menu右键菜单插件的githb地址为:https://github.com/dgoguerra/bootstrap-menu