关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

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

发布2022-11-04浏览193次

详情内容

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

下载地址:

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

效果图:

image.png

// 操作代码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;}
点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载