所有分类
  • 所有分类
  • 最新发布

ContextMenu – 右键菜单插件

2018102105104768

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

 

原文链接:https://www.7zt.cn/569.html,转载请注明出处~~~

0
广告位招租

评论0

疫情期间优惠活动!原XXX包年VIP,现XX;原XXX终身VIP,现XXX。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?