web.contextmenu.js 指定div弹出多层右键菜单js插件-BFW插件库

web.contextmenu.js 指定div弹出多层右键菜单js插件

web.contextmenu.js 指定div弹出多层右键菜单插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var menuJson = [{
            name: "添加",
            id: "menu1",
            callback: function() {
                alert("添加");
            }
        },
            {
                name: "修改",
                id: "menu2",
                callback: function() {
                    alert("修改");
                }
            },
            {
                name: "删除",
                id: "menu-delete",
                callback: function() {
                    alert("删除");
                }
            },
            {
                name: "查询",
                id: "menu-query",
                callback: function() {
                    alert("查询");
                }
            },

            // 2
            {
                name: "二层子菜单一",
                id: "menu1Submenu1",
                parent: "menu1"
            },
            {
                name: "二层子菜单二",
                id: "menu1Submenu2",
                parent: "menu1",
                callback: function() {
                    alert("天才");
                }
            },
            {
                name: "二层查询菜单",
                id: "second-level-menu-query",
                parent: "menu-query",
                callback: function() {
                    alert("查询第二层");
                }
            },


            // 3
            {
                name: "三层子菜单",
                id: "menu1Submenu1Submenu",
                parent: "menu1Submenu1",
                callback: function() {
                    alert("第三层子菜单");
                }
            },

            // 4
            {
                name: "第四层子菜单",
                id: "fourth-menu1",
                parent: "menu1Submenu1Submenu",
                callback: function() {
                    alert("第四层子菜单");
                }
            },
        ];
        bready(function() {
            use(["web.contextmenu", "web.contextmenu"], function() {


                window.contextMenu(document.querySelector("#div1"), menuJson);

                window.contextMenu(document.querySelector("#div2"), [
                    // 1
                    {
                        name: "第二个菜单1",
                        id: "sec-menu-1",
                        callback: function() {
                            alert("大天才");
                        }
                    },
                    {
                        name: "第二个菜单2",
                        id: "sec-menu-2",
                        callback: function() {
                            alert("小天才");
                        }
                    },
                    // 1 end
                    // 2
                    {
                        name: "第二个子菜单1",
                        id: "sec-s-menu-1",
                        parent: "sec-menu-1",
                        callback: function() {
                            alert("大天才中的小天才");
                        }
                    },
                ]);
            });
        });
    </script>
</head>
<body>


    <div id="div1" style="width:300px;height:300px;background:#036;color:#fff;text-align:center;line-height:300px">
        在这里鼠标右键
    </div>
    <div id="div2" style="width:300px;height:300px;background:#036;color:#fff;text-align:center;line-height:300px;margin-top:10px">
        在这里鼠标右键
    </div>


</body>
</html>