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

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

 40940  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自动定位当地天气预报

jQuery调用新浪天气,显示城市天气气温风向风级图标白天夜间
  独立的部件
 61938  437

jQuery前端excel导入插件xlsx.core.js

此插件作用可以把excel表,导入到网页中用table显示出来
  独立的部件
 56118  415

jQuery二维码生成插件qrcode.js

应用小工具二维码生成
  独立的部件
 39280  478

CSS3开关切换按钮

多组超具创意的CSS3开关切换按钮
  独立的部件
 41092  498

讨论这个项目(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
        不错
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复