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:'关闭',\n" + " icon:'<i class=\"fa fa-close\"></i>',\n" + " child:[\n" + " {\n" + " title:'关闭当前',\n" + " icon:'<i class=\"fa fa-camera\"></i>'\n" + " },\n" + " {\n" + " title:'关闭其它',\n" + " icon:'<i class=\"fa fa-calendar\"></i>'\n" + " },\n" + " {\n" + " title:'全部关闭',\n" + " disabled: true,\n" + " icon:'<i class=\"fa fa-database\"></i>'\n" + " }\n" + " ],\n" + "\n" + " },{\n" + " title:'新窗口打开',\n" + " icon:'<i class=\"fa fa-plus\"></i>'\n" + " },\n" + " ],\n" + " afterInit: function (ul) {\n" + " setTimeout(function(){\n" + " ul.css({'top':100,'left':710}).show();\n" + " },1000);\n" + "\n" + " },\n" + &quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0