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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!