EasyUI 的Tab 标签添加右键菜单
Posted 笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI 的Tab 标签添加右键菜单相关的知识，希望对你有一定的参考价值。
样式：
主要提供右键功能代码。
(只需要提供你需要的js和css就行了)
<!doctype html> <html> <head> <base href="/smile/" /> <title>标签右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <meta HTTP-EQUIV="Expires" CONTENT="0"> <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" /> <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" /> <script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script> <script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> </head> <body class="easyui-layout"> <div data-options="region:\'west\',title:\'功能导航菜单\',collapsible:false,iconCls:\'fa fa-leaf\'" style="width: 200px;"> <div id="aa" class="easyui-accordion" data-options="fit:true"> <div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building"> <ul class="easyui-tree" data-options="onClick:clickTree"> <li data-options="attributes:{\'url\':\'/smile/html/menu1.html\'}"><span>菜单一</span></li> </ul> </div> <div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building"> <ul class="easyui-tree" data-options="onClick:clickTree"> <li data-options="attributes:{\'url\':\'/smile/html/menu2.html\'}"><span>菜单二</span></li> </ul> </div> </div> </div> <!--首页 --> <div data-options="region:\'center\',collapsible:false"> <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true"> <div title="首页" style="overflow:hidden;" data-options="iconCls:\'fa fa-home\'"> <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> </div> </div> </div> <!--右键菜单栏 --> <div id="mm" class="easyui-menu" style="width: 120px;"> <div id="mm-tabclosecurrent" name="1"> 关闭当前页</div> <div id="mm-tabcloseall" name="2"> 全部关闭</div> <div id="mm-tabcloseother" name="3"> 其他全部关闭</div> </div> <script type="text/javascript"> $(function(){ //监听右键事件，创建右键菜单 $(\'#mainTabs\').tabs({ onContextMenu:function(e, title,index){ e.preventDefault(); if(index>0){ $(\'#mm\').menu(\'show\', { left: e.pageX, top: e.pageY }).data("tabTitle", title); } } }); //右键菜单click $("#mm").menu({ onClick : function (item) { closeTab(this, item.name); } }); }); function addTab(title, url) { if ($(\'#mainTabs\').tabs(\'exists\', title)) { $(\'#mainTabs\').tabs(\'select\', title); } else { var content = \'<iframe scrolling="auto" frameborder="0" src="\'+ url+\'" style="width:100%;height:99%;"></iframe>\'; $(\'#mainTabs\').tabs(\'add\', { title: title, content: content, closable: true , cache:true, }); } } // //删除Tabs function closeTab(menu, type) { var allTabs = $("#mainTabs").tabs(\'tabs\'); var allTabtitle = []; $.each(allTabs, function (i, n) { var opt = $(n).panel(\'options\'); if (opt.closable) allTabtitle.push(opt.title); }); var curTabTitle = $(menu).data("tabTitle"); var curTabIndex = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle)); switch (type) { case "1"://关闭当前 $("#mainTabs").tabs("close", curTabTitle); return false; break; case "2"://全部关闭 for (var i = 0; i < allTabtitle.length; i++) { $(\'#mainTabs\').tabs(\'close\', allTabtitle[i]); } break; case "3"://关闭其他全部 for (var i = 0; i < allTabtitle.length; i++) { if (curTabTitle != allTabtitle[i]) $(\'#mainTabs\').tabs(\'close\', allTabtitle[i]); } $(\'#mainTabs\').tabs(\'select\', curTabTitle); break; } } function clickTree(node) { if ($(this).tree(\'isLeaf\', node.target)) { addTab(node.text, node.attributes.url); } else { $(this).tree(\'toggle\', node.target); } } </script> </body> </html>
以上是关于EasyUI 的Tab 标签添加右键菜单的主要内容，如果未能解决你的问题，请参考以下文章