纯js自定义右键菜单插件

来源:https://www.sucaihuo.com/js/1987.html 2017-05-20 23:04浏览(706) 收藏

一款纯js写的自定义右键弹出菜单,里面的图标都是png图,可以自行替换,点击出现的提示也可以自由设置。
纯js自定义右键菜单插件
分类:导航菜单 > 二级菜单 难易:入门级
查看演示 下载资源 下载积分: 30 积分

CSS样式和javascript代码均写在head部分,引入的javascript插件也在头部引入:

body,div,span,h2 {
    margin: 0;
    padding: 0
}

body {
    background: url(images/bg.jpg);
    background-position: center;
    background-size: cover;
    font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}

.box {
    width: 1000px;
    height: 800px;
    margin: 20px auto;
    border-radius: 10px;
    background: #EDEDED;
    box-shadow: #000 0 0 15px inset;
    -webkit-box-shadow: #000 0 0 15px inset;
    -moz-box-shadow: #000 0 0 15px inset;
    -o-box-shadow: #000 0 0 15px inset;
    padding: 20px;
    color: #ccc;
    font-size: 36px;
    font-weight: bolder
}

.kinerMenuBox {
    width: 200px;
    background: #FEFEFE;
    border: solid 1px #444;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
    -webkit-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
    -moz-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
    -o-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
    font-size: 16px;
    position: absolute
}

.kinerMenuBox .kinerMenuTitle {
    background: #DDD;
    padding: 10px 5px;
    border-bottom: inset #444 1px;
    cursor: default
}

.kinerMenuBox .kinerMenuTitle .kinerMenuTitleIcon {
    width: 30px;
    height: 30px
}

.kinerMenuBox .kinerMenuTitle .kinerMenuTitleCon {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    color: #444;
    font-size: 18px;
    display: inline-block;
    vertical-align: top
}

.kinerMenuBox .kinerMenuItem {
    background: #FFF;
    padding: 5px 5px
}

.kinerMenuBox .kinerMenuItem:hover {
    background: #CCC
}

.kinerMenuBox .kinerMenuItem .kinerMenuItemIcon {
    display: inline-block;
    width: 30px;
    height: 30px
}

.kinerMenuBox .kinerMenuItem .kinerMenuItemCon {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    position: relative;
    color: #444;
    font-size: 16px;
    display: inline-block;
    vertical-align: top
}

.kinerMenuBox .kinerSeparator {
    width: 100%;
    height: 1px;
    border-bottom: dashed 1px #444;
    border-left: none;
    border-right: none
}

.kinerMenuBox .kinerKeyMap {
    margin-right: 5px;
    right: 10px;
    position: absolute;
    color: #444;
    height: 30px;
    line-height: 30px;
    display: inline-block
}
<script type="text/javascript" src="js/contextmenu.js"></script>
<script>
window.onload = function() {
    console.log(contextMenu);
    new contextMenu({
        target: document.getElementById("box"),
        hasIcon: !0,
        hasTitle: !0,
        autoHide: !0,
        linkClass: !0,
        menu: {
            title: {
                icon: "images/em_01.png",
                content: "菜单标题"
            },
            items: [{
                icon: "images/em_02.png",
                content: "菜单项1",
                action: function(n, t) {
                    alert(t.content)
                },
                keymap: "alt+1"
            }, "-",
            {
                icon: "images/em_04.png",
                content: "菜单项2",
                action: function(n, t) {
                    alert("点击:" + t.content)
                },
                keymap: "alt+2"
            }, {
                icon: "images/em_05.png",
                content: "菜单项3",
                action: function(n, t) {
                    alert("点击:" + t.content)
                },
                keymap: "ctrl+j"
            }, {
                icon: "images/em_06.png",
                content: "菜单项4",
                action: function(n, t) {
                    alert("点击:" + t.content)
                },
                keymap: "shift+y"
            }, "-",
            {
                icon: "",
                content: "菜单项5",
                action: function(n, t) {
                    console.log(n, t, this)
                }
            }, {
                icon: "images/em_07.png",
                content: "菜单项6",
                action: function(n, t) {
                    alert("点击:" + t.content)
                }
            }, {
                icon: "images/em_08.png",
                content: "菜单项7",
                action: function(n, t) {
                    alert("点击:" + t.content)
                }
            }]
        },
        classes: {
            menuBox: {
                width: "200px",
                background: "#FEFEFE",
                border: "solid 1px #333",
                cursor: "pointer",
                "border-radius": "10px",
                overflow: "hidden",
                "box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
                "-webkit-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
                "-moz-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
                "-o-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
                "font-size": "16px"
            },
            menuTitle: {
                self: {
                    background: "#DDDDDD",
                    padding: "10px 5px",
                    "border-bottom": "inset #000 1px",
                    cursor: "default"
                },
                icon: {
                    width: "30px",
                    height: "30px"
                },
                content: {
                    height: "30px",
                    "line-height": "30px",
                    "padding-left": "10px",
                    color: "#333333",
                    "font-size": "18px",
                    display: "inline-block",
                    "vertical-align": "top"
                }
            },
            item: {
                self: {
                    background: "#FFF",
                    padding: "5px 5px"
                },
                icon: {
                    width: "30px",
                    height: "30px"
                },
                content: {
                    height: "30px",
                    "line-height": "30px",
                    "padding-left": "10px",
                    color: "#333333",
                    "font-size": "16px",
                    display: "inline-block",
                    "vertical-align": "top"
                },
                hover: {
                    background: "#ccc"
                },
                keymap: {
                    "margin-right": "5px",
                    color: "blue"
                }
            },
            separator: {
                width: "100%",
                height: "1px",
                border: "solid 1px #000",
                "border-left": "none",
                "border-right": "none"
            }
        }
    })
};

body部分只有一个div容器,用来设置鼠标右键的触发区域,代码如下:

<div class="box" id="box" unselectable="on" onselectstart="return!1" style="-moz-user-select:none;-webkit-user-select:none;cursor:default;font-size:20px;">
    请对着白色区域右键单击....<br>
    <br>
    (或使用快捷键【 alt+1 , alt+2 , ctrl+j , shift+y 】)
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2