导航菜单

ContextMenu - 右键菜单插件

阿里云

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="path/to/bootstrap.min.css">
  2. <link rel="stylesheet" href="path/to/font-awesome.min.css">
  3. <link rel="stylesheet" href="path/to/tether.min.css">
  4. <script src="path/to/jquery.min.js"></script>
  5. <script src="path/to/bootstrap.min.js"></script>
  6. <script src="path/to/tether.min.js"></script>
  7. <script src="path/to/jquery.context-menu.min.js"></script>

CSS 样式:

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

  1. .context-menu.dropdown-menu {
  2.   display: block;
  3.   left: 0px;
  4.   opacity: 0;
  5.   position: absolute;
  6.   top: 0px;
  7.   transition: visibility 0s 0.1s, opacity 0.1s linear;
  8.   visibility: hidden;
  9. }
  10.  
  11. .context-menu.dropdown-menu.open {
  12.   visibility: visible;
  13.   opacity: 1;
  14.   transition: opacity 0.1s linear;
  15. }
  16.  
  17. .context-menu.dropdown-menu a { cursor: pointer; }
  18.  
  19. .dropdown-submenu .dropdown-toggle:after {
  20.   content: "\f0da";
  21.   display: inline-block;
  22.   float: right;
  23.   font: normal normal normal 14px/1 FontAwesome;
  24.   font-size: inherit;
  25.   padding-top: 3px;
  26.   text-rendering: auto;
  27.   -webkit-font-smoothing: antialiased;
  28. }
  29.  
  30. .dropdown-submenu .dropdown-menu {
  31.   top: 0;
  32.   left: 100%;
  33. }
  34.  
  35. #cnxt-cursor {
  36.   height: 0px;
  37.   opacity: 0;
  38.   position: absolute;
  39.   visibility: hidden;
  40.   width: 0px;
  41. }

初始化插件:

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

  1. let _menuItems = [
  2.     {
  3.         type: "title",
  4.         text: "Modifica"
  5.     },
  6.     {
  7.         type: "item",
  8.         icon: "clone",
  9.         text: "复制",
  10.         key: "copy",
  11.         action: _debug
  12.     },
  13.     {
  14.         type: "item",
  15.         icon: "scissors",
  16.         text: "剪切",
  17.         key: "cut",
  18.         action: _debug
  19.     },
  20.     {
  21.         type: "item",
  22.         icon: "clipboard",
  23.         text: "粘贴",
  24.         key: "paste",
  25.         action: _debug
  26.     },
  27.     {
  28.         type: "divider"
  29.     },
  30.     {
  31.         type: "submenu",
  32.         text: "附件...",
  33.         items: [
  34.  
  35.             {
  36.                 type: "title",
  37.                 text: "附件..."
  38.             },
  39.             {
  40.                 type: "item",
  41.                 icon: "phone",
  42.                 text: "电话",
  43.                 key: "phone",
  44.                 action: _debug
  45.             },
  46.             {
  47.                 type: "item",
  48.                 icon: "home",
  49.                 text: "联系地址",
  50.                 key: "addresses",
  51.                 action: _debug
  52.             },
  53.             {
  54.                 type: "item",
  55.                 icon: "globe",
  56.                 text: "Browser",
  57.                 key: "browser",
  58.                 action: _debug
  59.             },
  60.             {
  61.                 type: "item",
  62.                 icon: "envelope-o",
  63.                 text: "电子右键",
  64.                 key: "mail",
  65.                 action: _debug
  66.             },
  67.             {
  68.                 type: "item",
  69.                 icon: "calendar",
  70.                 text: "Calendario",
  71.                 key: "calendar",
  72.                 action: _debug
  73.             },
  74.             {
  75.                 type: "item",
  76.                 icon: "clock-o",
  77.                 text: "Orologio",
  78.                 key: "clock",
  79.                 action: _debug
  80.             },
  81.             {
  82.                 type: "item",
  83.                 icon: "calculator",
  84.                 text: "Calcolatrice",
  85.                 key: "calc",
  86.                 action: _debug
  87.             }
  88.         ]
  89.     },
  90.     {
  91.         type: "submenu",
  92.         text: "Condividi con...",
  93.         items: [
  94.  
  95.             {
  96.                 type: "title",
  97.                 text: "Condividi con..."
  98.             },
  99.             {
  100.                 type: "item",
  101.                 icon: "google-plus-official",
  102.                 text: "Google+",
  103.                 key: "google_plus",
  104.                 action: _debug
  105.             },
  106.             {
  107.                 type: "item",
  108.                 icon: "facebook-official",
  109.                 text: "Facebook",
  110.                 key: "facebook",
  111.                 action: _debug
  112.             },
  113.             {
  114.                 type: "item",
  115.                 icon: "twitter",
  116.                 text: "Twitter",
  117.                 key: "twitter",
  118.                 action: _debug
  119.             }
  120.         ]
  121.     },
  122.     {
  123.         type: "divider"
  124.     },
  125.     {
  126.         type: "title",
  127.         text: "Pagina"
  128.     },
  129.     {
  130.         type: "item",
  131.         icon: "refresh",
  132.         text: "Ricarica",
  133.         action: function()
  134.         {
  135.             window.location.reload();
  136.         }
  137.     },
  138.     {
  139.         type: "item",
  140.         icon: "home",
  141.         text: "Torna alla home",
  142.         action: function()
  143.         {
  144.             window.location.href = "/";
  145.         }
  146.     }
  147. ];

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

  1. $(window).contextMenu({
  2.   items: _menuItems  
  3. });

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

ContextMenu - 右键菜单插件

已有 390 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!