BootstrapMenu.js右键弹层菜单使用详解

在使用bootstrap框架时，有时想做鼠标右键快捷弹层操作，可以使用BootstrapMenu.js插件。可以实现自定义操作点击事件。首先引入**BootstrapMenu.min.js**

下载地址：

链接: https://pan.baidu.com/s/1axh2zFJOUoZ4XJU-yjrchw?pwd=f2cw 提取码: f2cw

效果图：

// 操作代码var menu = new BootstrapMenu('.table tbody tr', {//获取表格当前点击的行
        fetchElementData: function (row) {     //fetchElementData获取原数据并返回
            var dataRow = $table.bootstrapTable('getData')[row[0].dataset.index]
            return dataRow;
        },
        //自定义右键菜单的功能
        actions: {
            detailDescription: {
                name: '<font size=2>查看</font>',
                iconClass: 'uil-search-alt',// 图标
                onClick: function (row) {   
                 // 执行右击事件
                }
            },
            editDescription: {
                name: '<font size=2>更新</font>',
                iconClass: 'uil-edit',
                onClick: function (row) {   
                	//执行右击事件
                }
            }
        }
    });

action也可以传入数据对象：

    var menu = new BootstrapMenu('.tabs-content', {
        fetchElementData: function ($rowElem) {
            return $rowElem;
        },
        actions: [{
            name: '关闭当前页面',
            onClick: function (ele) {
               

            }
        }, {
            name: '关闭所有页面',
            onClick: function (ele) {
                
            }

        }, {
            name: '关闭其他页面',
            onClick: function (ele) {
                
            }
        }]
    });

 菜单样式

/*表格菜单颜色/左边距*/.dropdown-menu {
    padding-left: 5px;
    color: #bec1c5;}/*表格菜单<li>标签间距*/.dropdown-menu li {
    padding-bottom: 5px;}/*表格菜单宽度*/.bootstrapMenu ul {
    min-width: 6rem;}/*表格菜单字体颜色*/.bootstrapMenu ul li a {
    color: #838f9c;}