README

一个专为方便所有人使用而制作的Bootstrap上下文菜单扩展。

查看[demo页面] [id]。 [id]:http://sydcanem.github.io/bootstrap-contextmenu/

安装

bower install bootstrap-contextmenu

注意：需要bootstrap.css

使用方法

通过数据属性

将data-toggle="context"添加到需要自定义上下文菜单的任何元素上，并通过CSS设置元素的position: relative。

将data-target属性指向您的自定义上下文菜单。

<div class="context" data-toggle="context" data-target="#context-menu"></div>

通过JavaScript

通过JavaScript调用上下文菜单

$('.context').contextmenu({
  target:'#context-menu', 
  before: function(e,context) {
    // execute code before context menu if shown
  },
  onItem: function(context,e) {
    // execute on menu item selection
  }
})

选项

target - 等同于data-target属性。它标识将显示的菜单的HTML。

before - 是在显示上下文菜单之前调用的函数。如果此函数返回false，则不会显示上下文菜单。它传递两个参数：

• e - 原始事件。（您可以通过执行e.preventDefault()来取消浏览器事件）。
• context - 右键点击发生的DOM元素。

onItem - 是当菜单项被点击时调用的函数。当您想在项被点击时执行特定函数时很有用。它传递两个参数：

• context - 右键点击发生的DOM元素。
• e - 菜单项的点击事件，$(e.target)是项元素。

scopes - 动态添加上下文元素的DOM选择器。参见问题。

事件

所有事件都在上下文菜单上触发。查看dropdown插件以获取事件的完整描述。

• show.bs.context - 当菜单打开时立即触发此事件。
• shown.bs.context - 当下拉菜单对用户可见时触发此事件。
• hide.bs.context - 当调用隐藏实例方法时立即触发此事件。
• hidden.bs.context - 当下拉菜单完成从用户那里隐藏时触发此事件（将等待CSS过渡完成）。

示例

$('#myMenu').on('show.bs.context',function () {
  // do something...
});

示例

激活并指定上下文菜单的选择器

$('#main').contextmenu({'target':'#context-menu'});

在div内激活，但不作用于span

$('#main').contextmenu({
  target: '#context-menu2',
  before: function (e, element, target) {
      e.preventDefault();
      if (e.target.tagName == 'SPAN') {
          e.preventDefault();
          this.closemenu();
          return false;
      }
      return true;
  }
});

动态修改菜单

$('#main').contextmenu({
  target: "#myMenu",
  before: function(e) { 
    this.getMenu().find("li").eq(2).find('a').html("This was dynamically changed");
  }
});

在选中时显示菜单名称

$('#main').contextmenu({
  onItem: function(context, e) {
    alert($(e.target).text());
  }
});

实用功能

• 关闭和打开动画
• 菜单的键盘快捷键

许可

MIT