ContextMenu - 右键菜单插件

PetitQ 导航菜单 2018-10-21 1.58K 0 1

这是一款基于 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

ContextMenu - 右键菜单插件

已有 394 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

ContextMenu - 右键菜单插件

使用方法：

CSS 样式：

初始化插件：

ContextMenu - 右键菜单插件

相关文章

五彩带图标动画菜单

紫色渐变CSS平滑过渡导航菜单栏

移动优先多级导航菜单jQuery插件

发表回复取消回复

热销模板

导航菜单

使用方法：

CSS 样式：

初始化插件：

ContextMenu - 右键菜单插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复