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

所属分类:其他,导航-独立的部件

 41238  328  查看评论 (4)
分享到微信朋友圈
X
基于Bootstrap的jQuery右键上下文菜单插件 ie兼容10

可以通过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
      }
  }]
});


相关插件-独立的部件

jQuery表格 可选择导出各种格式

表格内容详情可选择导出各种格式(Excel(xls)、PDF、PNG)
  独立的部件
 51432  508

jQuery社会华分享插件

jQuery社会华分享插件支持微信,QQ,新浪,人人等
  独立的部件
 41929  494

jQuery表格导出数据

将表格的数据导出到excel,csv,pdf或是直接打印
  独立的部件
 49770  566

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 62447  434

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    靓仔fin 0
    2018/12/30 15:57:52
    怎么获取到右键所在行的内容啊 回复
    长安柚子 0
    2017/12/12 10:50:05

    jquery3好像不能用

    回复
    花∮饰∮雪 0
    2016/1/24 19:01:58

    很好,刚好项目要用到这个bootstrap右击

        →お咏℃远シ 0
        2016/10/19 17:10:02
        不错
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复