context-menu插件实现右键点击弹出多级菜单效果代码-html代码-BFW代码库

context-menu插件实现右键点击弹出多级菜单效果代码

代码语言：html

代码描述：context-menu插件实现右键点击弹出多级菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单插件</title>
    <style>
        html {
            height: 100%
        }
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/context-menu.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/context-menu.js"></script>
    <style>
        body {
            margin: 0
        }
        .menu-div {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            margin: 50px;
            background: green;
            color: white;
        }
        .use-code {
            border: 1px solid #0e0e0e;
            padding: 2px;
            line-height: 20px;
            background-color: #666;
            color: white;
            font-size: 16px
        }
    </style>
    <script>
        function htmlEncode(s) {
            return (typeof s != "string") ? s:
            s.replace(/"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g,
                function($0) {
                    var c = $0.charCodeAt(0), r = ["&#"];
                    c = (c == 0x20) ? 0xA0: c;
                    r.push(c); r.push(";");
                    return r.join("");
                });
        }
    </script>
</head>
<body>
    <div style="margin: 0;display: flex;flex-direction: row">
        <div id="menu1" class="menu-div">
            右键菜单
        </div>
        <div id="menu2" class="menu-div">
            包含二级菜单
        </div>
        <div id="menu3" class="menu-div">
            带图标
        </div>
        <div id="menu4" class="menu-div">
            禁用选项
        </div>
    </div>
    <br>
    <div style="padding: 20px;">
        如果需要动态修改禁用属性,或者修改选项，只需重新调用mouseMenu方法，设置disabled属性即可
    </div>
    <pre class="use-code">
        <script>
            document.write(htmlEncode("$(\"#menu4\").mouseMenu({\n" +
                "        options:[\n" +
                "            {\n" +
                "                title:'刷新',\n" +
                "                //子菜单会自动禁用\n" +
                "                disabled: true,\n" +
                "                icon:'<i class=\"fa fa-refresh\"></i>',\n" +
                "                child:[\n" +
                "                    {\n" +
                "                        title:'刷新当前',\n" +
                "                        icon:'<i class=\"fa fa-android\"></i>'},\n" +
                "                    {\n" +
                "                        title:'刷新全部',\n" +
                "                        icon:'<i class=\"fa fa-apple\"></i>'\n" +
                "                    },\n" +
                "                ]\n" +
                "            },{\n" +
                "                title:'锁定',icon:'<i class=\"fa fa-lock\"></i>'\n" +
                "            },{\n" +
                "                title:'关闭'.........完整代码请登录后点击上方下载按钮下载查看