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:'关闭'.........完整代码请登录后点击上方下载按钮下载查看

网友评论0