基于Bootstrap的jQuery右键上下文菜单插件 A Context menu plugin using Bootstrap's style

Basic demos

Demo 1

On instantiation, the context menu is given a selector of elements where it will be triggered.

在这个例子中，在下面的矩形区域内右键点击就可以打开上下文菜单。

在这个区域内的任何位置点击右键

var menu = new BootstrapMenu('#demo1Box', {
  actions: [{
      name: 'Action',
      onClick: function() {
        toastr.info("'Action' clicked!");
      }
    }, {
      name: 'Another action',
      onClick: function() {
        toastr.info("'Another action' clicked!");
      }
    }, {
      name: 'A third action',
      onClick: function() {
        toastr.info("'A third action' clicked!");
      }
  }]
});

Demo 2

你也可以通过不同的事件来触发上下文菜单，也可以将右键菜单放置在触发元素的任何相对位置。

View the code

var menu1 = new BootstrapMenu('#demo2LeftBtn', {
  menuEvent: 'click', // default value, can be omitted
  menuSource: 'element',
  menuPosition: 'belowLeft', // default value, can be omitted
  actions: /* ... */
});

var menu2 = new BootstrapMenu('#demo2RightBtn', {
  menuEvent: 'right-click',
  menuSource: 'element',
  menuPosition: 'belowLeft',
  actions: /* ... */
});

var menu3 = new BootstrapMenu('#demo2HoverBtn', {
  menuEvent: 'hover',
  menuSource: 'element',
  menuPosition: 'belowRight', // matches element's right side
  actions: /* ... */
});

高级示例

Demo 3

onClick事件监听器可以知道一组元素中的哪一个被点击了。

#	Name	Description
1	First row	Lorem ipsum dolor sit amet
2	Second row	Nemo enim ipsam voluptatem quia voluptas
3	Third row	Ut enim ad minima veniam

View the code

/* 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 demo3Rows = {
  '1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
  '2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
  '3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
};

var menu = new BootstrapMenu('.demo3TableRow', {
  /* a function to know which row was the context menu opened on,
   * given the selected DOM element. When this function is defined,
   * every user-defined action callback receives its return value as
   * an argument. */
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo3Rows[rowId];
  },
  actions: [{
    name: 'Edit name',
    onClick: function(row) {
      toastr.info("'Edit name' clicked on '" + row.name + "'");
    }
  }, {
    name: 'Edit description',
    onClick: function(row) {
      toastr.info("'Edit description' clicked on '" + row.name + "'");
    }
  }]
});

Demo 4

你可以给每一个action一个ID和通过actionsGroups参数对它们进行分组。你也可以通过isShown和isEnabled参数来控制菜单项是否显示或是否可用。

可以通过iconClass属性来使用Font Awesome字体图标。

#	Name	Description
1	First row	Lorem ipsum dolor sit amet
2	Second row	Nemo enim ipsam voluptatem quia voluptas	Not editable
3	Third row	Ut enim ad minima veniam	Not deletable

View the code

var demo4Rows = {
  '1': { name: 'First row', isEditable: true, isRemovable: true },
  '2': { name: 'Second row', isEditable: false, isRemovable: true },
  '3': { name: 'Third row', isEditable: true, isRemovable: false }
};

var menu = new BootstrapMenu('.demo4TableRow', {
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo4Rows[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) {
        toastr.info("'Edit name' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    editDescription: {
      name: 'Edit description',
      iconClass: 'fa-pencil',
      onClick: function(row) {
        toastr.info("'Edit description' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    setEditable: {
      name: 'Set editable',
      iconClass: 'fa-unlock',
      onClick: function(row) {
        toastr.info("'Set editable' clicked on '" + row.name + "'");
      },
      isShown: function(row) {
        return !row.isEditable;
      }
    },
    setUneditable: {
      name: 'Set uneditable',
      iconClass: 'fa-lock',
      onClick: function(row) {
        toastr.info("'Set uneditable' clicked on '" + row.name + "'");
      },
      isShown: function(row) {
        return row.isEditable;
      }
    },
    deleteRow: {
      name: 'Delete row',
      iconClass: 'fa-trash-o',
      onClick: function(row) {
        toastr.info("'Delete row' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable && row.isRemovable;
      }
    }
  }
});

Demo 5

Classes can also be added easily to an action by setting a classNames property, which will be parsed through the classnames utility. This property can be a string, an object or a function that receives the element's fetched data as a first argument.

In the same way, an action's name can be defined as a function. In that case, it will be called before each render of the menu, receiving as the first argument the data returned by fetchElementData.

#	Name	Description
1	John Martin	Lorem ipsum dolor sit amet
2	Peter Roberts	Nemo enim ipsam voluptatem quia voluptas
3	Stuart Smith	Ut enim ad minima veniam	Not editable

View the code

var demo5Rows = {
  '1': { first_name: 'John', last_name: 'Martin', is_editable: true },
  '2': { first_name: 'Peter', last_name: 'Roberts', is_editable: true },
  '3': { first_name: 'Stuart', last_name: 'Smith', is_editable: false }
};

var menu = new BootstrapMenu('.demo5TableRow', {
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo5Rows[rowId];
  },
  actions: [{
    name: function(row) {
      // custom action name, with the name of the selected user
      if (row.is_editable) {
        return 'Edit ' + row.first_name;
      }
      // basic HTML can also be rendered in the action name
      return '<i>Not editable</i>';
    },
    iconClass: 'fa-pencil',
    classNames: function(row) {
      // add the 'action-success' class only if the row is editable
      return { 'action-success': row.is_editable };
    },
    onClick: function(row) {
      toastr.info("'Edit description' clicked on '" + row.first_name + "'");
    },
    isEnabled: function(row) {
      return row.is_editable;
    }
  }, {
    // custom action name, with the name of the selected user
    name: function(row) {
      return 'Message ' + row.first_name;
    },
    iconClass: 'fa-envelope-o',
    onClick: function(row) {
      toastr.info("'Message " + row.first_name + "' clicked on '" + row.first_name + "'");
    }
  }, {
    name: 'Block account',
    iconClass: 'fa-trash-o',
    // always add the class 'action-danger'
    classNames: 'action-danger',
    onClick: function(row) {
      toastr.info("'Delete row' clicked on '" + row.first_name + "'");
    }
  }]
});