基于Bootstrap的jQuery右键上下文菜单插件

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;
      }
    }
  }
});                
              

配置参数

上下文菜单初始化参数：

Actions 属性：

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