bootstrap右键菜单插件

这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作，并通过tether插件进行定位，具有多级菜单，灵活，响应式等特点。

使用方法

在页面中引入jquery，bootstrap相关文件，font-awesome字体文件，以及jquery右键菜单插件jquery.context-menu.min.js。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome.min.css">
<link rel="stylesheet" href="path/to/tether.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/tether.min.js"></script>
<script src="path/to/jquery.context-menu.min.js"></script>            
                

CSS样式

为该bootstrap右键菜单添加下面的必要的CSS样式。

.context-menu.dropdown-menu {
  display: block;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: visibility 0s 0.1s, opacity 0.1s linear;
  visibility: hidden;
}

.context-menu.dropdown-menu.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s linear;
}

.context-menu.dropdown-menu a { cursor: pointer; }

.dropdown-submenu .dropdown-toggle:after {
  content: "\f0da";
  display: inline-block;
  float: right;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  padding-top: 3px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
}

#cnxt-cursor {
  height: 0px;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  width: 0px;
}             
                

初始化插件

右键菜单的内容通过js来设置，这样在更换右键菜单时，不需要更改DOM元素，提高插件的灵活度。下面的js代码定义了一个右键菜单。

let _menuItems = [
    {
        type: "title",
        text: "Modifica"
    },
    {
        type: "item",
        icon: "clone",
        text: "复制",
        key: "copy",
        action: _debug
    },
    {
        type: "item",
        icon: "scissors",
        text: "剪切",
        key: "cut",
        action: _debug
    },
    {
        type: "item",
        icon: "clipboard",
        text: "粘贴",
        key: "paste",
        action: _debug
    },
    {
        type: "divider"
    },
    {
        type: "submenu",
        text: "附件...",
        items: [

            {
                type: "title",
                text: "附件..."
            },
            {
                type: "item",
                icon: "phone",
                text: "电话",
                key: "phone",
                action: _debug
            },
            {
                type: "item",
                icon: "home",
                text: "联系地址",
                key: "addresses",
                action: _debug
            },
            {
                type: "item",
                icon: "globe",
                text: "Browser",
                key: "browser",
                action: _debug
            },
            {
                type: "item",
                icon: "envelope-o",
                text: "电子右键",
                key: "mail",
                action: _debug
            },
            {
                type: "item",
                icon: "calendar",
                text: "Calendario",
                key: "calendar",
                action: _debug
            },
            {
                type: "item",
                icon: "clock-o",
                text: "Orologio",
                key: "clock",
                action: _debug
            },
            {
                type: "item",
                icon: "calculator",
                text: "Calcolatrice",
                key: "calc",
                action: _debug
            }
        ]
    },
    {
        type: "submenu",
        text: "Condividi con...",
        items: [
            
            {
                type: "title",
                text: "Condividi con..."
            },
            {
                type: "item",
                icon: "google-plus-official",
                text: "Google+",
                key: "google_plus",
                action: _debug
            },
            {
                type: "item",
                icon: "facebook-official",
                text: "Facebook",
                key: "facebook",
                action: _debug
            },
            {
                type: "item",
                icon: "twitter",
                text: "Twitter",
                key: "twitter",
                action: _debug
            }
        ]
    },
    {
        type: "divider"
    },
    {
        type: "title",
        text: "Pagina"
    },
    {
        type: "item",
        icon: "refresh",
        text: "Ricarica",
        action: function()
        {
            window.location.reload();
        }
    },
    {
        type: "item",
        icon: "home",
        text: "Torna alla home",
        action: function()
        {
            window.location.href = "/";
        }
    }
];                
                

在页面DOM元素加载完毕之后，通过下面的方法来初始化该bootstrap右键菜单插件。

$(window).contextMenu({

  items: _menuItems
  
});                  
                

该bootstrap右键菜单插件的github地址为：https://github.com/Byloth/jQuery.ContextMenu.js